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■ f you're feeling left out of the mad scramble to establish a presence on the 
1 Internet, relax — you're not alone. And it's not too late. 

Despite the hype, a few businesses still don't have Web sites. And, even if you have 
one, you're probably still trying to figure out how to make your site better or more 
profitable, or you're already thinking that it's time to redesign. 

These days, it seems that every TV commercial, movie trailer, magazine insert, and 
grocery store bulletin board warns that any serious business owner needs to have a 
Web site, and most families, clubs, and even pet snakes do, too. 

That's increasingly true, but building a presence on the Internet isn't something you 
should do just because everyone else is doing it, and it isn't all bad if you've waited 
this long to make the Web a priority. Too many people have raced to put up Web 
sites without fully considering how the Web fits in with their other goals and how 
they can best take advantage of what the Web has to offer. 

If you've waited until now, you may even be better off because the Internet has 
matured, its audience has matured (it isn't populated solely by teenagers and aca- 
demics any more), and building a Web site has become easier than ever. If you're 
ready for a redesign of your first site, you have the advantage of being able to benefit 
from your own and everyone else's mistakes. 

About This Book 

This book is designed to help you progress through the entire process of creating a 
site, from registering a domain name to creating a compelling design to attracting 
just the right audience. 

But you don't have read this book from cover to cover, and you certainly don't have 
to memorize it. Web Sites Do-It-Yourself For Dummies was written to help you find the 
answers you need when you need them. Consider this book a quick study guide and 
a reference you can return to. Each section stands alone, giving you easy answers to 
specific questions and step-by-step instructions for common tasks. If you want to 
find out how to choose a hosting service, optimize images, or add video to your site, 
just jump right in and go directly to the section that most interests you. And don't 
worry about spilling coffee on the pages if you bring the book to breakfast — I prom- 
ise it won't complain! 

I designed this book using what I consider the best technologies for someone who 
wants to create their own, custom Web site. If you picked up this book, I assume that 
you're not an advanced programmer and that you don't want to hire a team of 
expensive Web consultants — you want to do it yourself. 
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To help you create the best site you can without your having to invest a million dol- 
lars, or a million hours, I based the step-by-step tasks in each chapter on the tech- 
nologies that I think offer all the features you need yet are relatively easy to figure 
out flvith a little guidance. For images, you find instructions for using Photoshop 
popular and competitively priced image program that you can use to 
:e\^dft, and optimize images so that they download quickly For the pages of 
your site, you find step-by-step instructions for Adobe Dreamweaver, as well as a 
variety of templates you can use to create a Web site quickly If you want to use 
other programs or services, you find alternatives in handy sidebars near the rele- 
vant step-by-step tasks. 




About the Templates and 
Web Site for this Book 

To help you get the most from this book, I created a special section at my Digital 
Family Web site with files and templates you can download and use as you follow 
along with the step-by-step tasks. You also find a FAQ (frequently asked questions), 
links, additional resources, and updates. To get all these goodies, just enter the 
following address in your Web browser: 

www. digital family. com/diy 

You need a password to get into this protected site, but if you have this book with 
you when you log on, you have everything you need to gain access right away. 

After you get into the Web site, you find instructions for downloading the templates, 
which give you a head start in creating a full-fledged site of your own. You find tem- 
plates designed to create an online profile or portfolio, a business site, or a family or 
hobby site. And, you can customize the look and feel of these templates to use them 
for any type of site with the image you want for your corner of the Web. 

Throughout this book, you find references to the Web site and the templates and 
other goodies that go with the step-by-step tasks. To make it easy to find the Web 
address whenever you need it, I've included it in the Cheat Sheet in the front of this 
book. 



Conventions Used in This Book 

Keeping things consistent makes them easier to understand. In this book, those con- 
sistent elements are conventions. Notice how the word conventions is in italics? 
That's a convention I use frequently. I put new terms in italics and then define them 
so that you know what they mean. 
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When I type URLs (Web addresses) or e-mail addresses within regular paragraph 
text, they look like this: www . j cwarner . com. Sometimes, however, I set off URLs on 
their own lines, like this: 
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arner . com 



That's so you can easily spot them on a page if you want to type them into your 
browser to visit a site. I also assume that your Web browser doesn't require the 
introductory http : / / for Web addresses. If you use an older browser, remember to 
type this part before the address. (Also make sure to include that part of the address 
when you're creating links.) 



Even though programs like Dreamweaver, which I recommend for creating Web sites, 
makes knowing the HTML code unnecessary, you may want to wade into the HTML 
waters occasionally. When I include HTML, such as the following code to link a URL 
to a Web page, I set off the HTML in the same monofont type as I use for URLs: 

<A HREF= "http :/ /www. j cwarner . com" >Janine ' s Web Site</A> 

When I introduce you to a new set of features, such as options in a dialog box, I set 
these items apart with bullets so that you can see that they're all related. When 
I want you to follow instructions, I use numbered steps to walk you through the 
process. 



Foolish Assumptions 

Although this book is designed to help you create a professional-looking Web site, 
I don't assume that you're a pro — at least not yet. In keeping with the philosophy 
behind the For Dummies series, this easy-to-use guide is designed for readers with a 
wide range of experience. Being interested in Web design and wanting to create a 
Web site are the keys, but that desire to learn is all I expect from you. 



HoW This Book Is Organized 

To ease you through the learning curve associated with any new program, I organ- 
ized Web Sites Do-It-Yourself For Dummies to be a complete reference. This section 
provides a breakdown of the four parts of the book and what you can find in 
each one. 



Part 1: Laying the Groundwork 

Part I gets you started in creating a Web site and helps you lay a solid foundation for 
your site. In Chapter 1, 1 walk you through the planning process, which can save you 
a lot of time in the long run. In Chapter 2, you find out how to register a domain 
name, and I give you tips for selecting the best hosting service. In Chapter 3, 1 intro- 
duce you to the fundamentals of Web design. 
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Part 11: Putting the Pages Together 



In Chapter 
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In Chapter 4, 1 move on to graphics, with an introduction to creating graphics for the 
erview of the differences in formats (GIF, JPEG, and PNG files), and a 
f tips for optimizing images so that they download quickly. In Chapter 5, 
you find an introduction to Dreamweaver, and in Chapters 6, 7, and 8, you get step- 
by-step instructions for personalizing the many templates that come with this book. 
In Chapter 9, you discover the Dreamweaver testing and publishing features so that 
you can publish your pages to the Internet as soon as you're ready. 



Part 111: Goinq Web 2. 0 

In Part III, I go beyond basic Web design, by giving you instructions for creating a 
blog in Chapter 10 and for recording and publishing a podcast in Chapter 11. In 
Chapter 12, you find a review of the many audio, video, and animation formats and 
instructions for how to add multimedia to your Web site. In Chapter 13, 1 "show you 
the money" with instructions for including advertising and affiliates on your pages 
as well as for adding e-commerce options to sell products and services. 



Part IV: The Part of Tens 

Chapter 14 includes ten cool Web services that can help you add advanced features 
to your site without having to know how to program. Finally, Chapter 15 features ten 
ways to promote your site, because after you do all the work of creating an outstand- 
ing Web site, you want to make sure to attract a good audience. 



Icons Used in This Book 






This icon reminds you of an important concept or procedure that you should store 
away in your memory bank for later use. 



This icon indicates a tip or technique that can save you time and money — and 
headaches — later. 



This icon warns you of any potential pitfalls — and gives you the all-important infor- 
mation on how to avoid them. 
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The 5 th Wave By Rich Tennant 




"Just Kovi accurately skould *ny Web site 
re£lect my place o£ business?'* 
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In This Chapter 

^ Pinpointing your Web site goals 

Understanding the benefits of developing a plan 
^ Stepping through a project plan 

Accommodating new ideas while sticking to your plan 



If a potential partner approached you with a "great new business idea" guaran- 
teed to make you money, you would probably ask a lot of questions before you 
even considered writing a check to get things started. You would probably also 
develop a business plan, or at least explore in detail how the new business would 
work, how much it would cost you, and how much money you could expect to make 
in return. 

If you're considering creating a Web site, or redesigning the one you already have, 
I recommend taking the same cautious approach. A good Web site is an extension of 
your business and, in many cases, a new product, service, or storefront that 
deserves the same level of planning as any other serious business venture. 

This chapter is designed to help you carefully consider the many aspects of planning 
a Web site before you start building. In the following pages, you'll find a series of 
questions to guide you through the early development process. 

If you can complete the exercises in this chapter with a business partner or some- 
one who provides a reality check, I recommend it. You know what they say about 
decisions made in a vacuum: They generally suck. If you're reading this book, you're 
probably sold on the idea of creating a Web site, and you even have some ideas 
about what you want to do. Now go see whether you can sell it to someone else, and 
take the time to do some careful planning before you dive in. 

The planning process for a Web project should include these tasks: 

Take time to determine your goals and objectives. 
I \^ Organize all content you want to include on your site. 
\^ Set a realistic budget and schedule. 

To get you started — and inspired — the first section of this chapter describes some 
of the successful ways Web sites are being used personally and professionally. 
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Evaluating the Many Reasons 
to-Create a Web Site 




start working on your own Web site, take a little time to explore what 
other people have done on the Web. Oh, sure, you surfed the Web already, I'm sure 
you did, but did you really study other Web sites? Did you analyze the way they're 
organized, study their front page features, and determine how their main navigation 
and even subnavigation features work? 

One of the best ways to prepare for developing your own Web site is to take some 
time to explore related Web sites (and not-so-related sites) for ideas. 

My goal in this book is to help you create not just a Web site but also one that truly 
serves your goals, whether you want to launch a new business on the Internet, pro- 
mote the business or organization you're already working with, or stay in touch with 
distant family members. Here are a few types of sites that people like you are suc- 
cessfully using on the Internet: 



Portfolio: Photographers, graphical designers, and artists use online portfo- 
lios to showcase their creative work, provide online references, and attract 
new clients. In Figure 1-1, photographer Jasper Johal showcases his photos 
in an online gallery that makes it easy to view a collection of images all dis- 
played on the same page: As you roll your cursor over the images on the 
right, they're displayed on the left. This type of navigation is a helpful way 
to present a gallery. 
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Figure 1-1 : Portfolio sites can showcase photos or artwork, like this gallery on Jasper Johal's Web site. 
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\^ Online profile: Consultants, authors, attorneys, dentists, and other profes- 
sionals are well served by online profile sites that include biographical 
information, a list of services or specialties, references and testimonials, 

kand links to completed projects, writings, or other works. To promote my 
©/n books and my speaking and consulting services, I created an online 
^profile site at www . j cwarner . com, shown in Figure 1-2. You can also access 
my site at www . JanineWarner . com. (In Chapter 2, you find tips about reg- 
istering multiple domain names for the same Web site.) 
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Figure 1-2: You can find my full biography, writing samples, and more at my online profile site at 

www . JCWarner . com. 



Club or organization: Better than a bumper sticker, a Web site like the one 
shown in Figure 1-3 is an excellent way to showcase your favorite clubs, 
charities, after-school activities, hobbies, and more. 

Small business: Whether you're a sole proprietor, like the dressmaker fea- 
tured in Figure 1-4, or you have a rapidly growing, soon-to-be big business, 
creating a Web site can make all the difference in your success, online 
and off. 
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'Women For Women International - Mozilla Firefox 
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Figure 1-3: Women for Women showcases its programs and success stories, and makes it easy for you to 
participate in its unique sponsorship programs. 
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Figure 1-4: Niche businesses, such as this dressmaker who specializes in making custom ball gowns, are 
especially well suited to the Web where it's easy to search for hard-to-find services. 



Chapter 1: Planning the Perfect Web Site I I 



Building, testing, and pubtishinq a Web Site 



Dropltaote 



building a Web site involves 
me page (often called the front 
page) that links to other pages representing 
different sections of the site. Those pages, in 
turn, can link to subsections that can then 



lead to additional subsections or individual 
pages. Once you've created a Web site, you 
can test all the links on your own hard drive 
and then upload the pages to a Web server 
when everything is ready and working well. 



Family and wedding: Before couples say "I do," more and more of them are 
building wedding Web sites that feature invitations, directions, guest reg- 
istries, and more. And, as a family grows, building a Web site is a way to help 
everyone stay in touch, which is the goal of the site shown in Figure 1-5. 
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Figure 1-5: Showcase your wedding photos, and keep your family members feeling connected with a per- 
sonal Web site featuring those you love. 



Dei/etopiny a Project Plan 

As with most project plans, a good Web site plan is made up of a series of tasks, a 
budget, a timeline, and a list of the resources and materials you need. Taking the 
time to create a detailed project plan gives you a structure within which you can 
work with greater confidence, and a much better chance of meeting your original 
goals on time and on budget. 

The following list provides a step-by-step approach to creating a project plan: 
1. Define the goals and objectives of your site. 



2. Create a content list 
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3. Create a task list. 

4. Set a timeline. 
Establish a budget. 

ermine how to handle maintenance and updates. 
7. Assemble a team. 



In the sections that follow, you find out the details involved in each of these steps. 



Defining goats and objectives 

The series of questions you find in this section is designed to help you assess how a 
Web site can best serve you, your business, or organization. Taking the time to 
answer each of the questions should help you define the goals of your site and 
create a guide that you can use as you organize and prioritize the development. 

Before you start sketching out the home page, it's good practice to define the most 
important aspects of a Web site and identify what you really need. Remember that 
you can always start small and develop a Web site over time. There's no rush to get 
the site up as fast as possible — the Web isn't going anywhere, and the best uses of 
the Web are the ones that will be around for a long time. 

Before you even start, make sure that you and your staff (or friends and family) are 
clear about why you're creating a Web site and what it will take. Spend a little time 
answering each of the following questions, and use your responses to shape the 
planning and implementation of your Web site. Creating an outstanding Web site 
takes effort, and that effort can take time away from other things that are important. 
The more you plan, the more you have time left over for a little fun and relaxation (at 
least once in a while). 

Why is having a Web site important to you? 

Separate the pipe from the dream and get clear on your true motivation. 
What are your objectives? 

Determine whether you will use your Web site to promote your business, 
sell products or services, cut costs, showcase clients, provide customer 
support, stay in touch with friends and family, or do something that no one 
else has ever done. 

As you go through the planning and development process, write down your 
top goals and refine them until you have two (at most, three) clear objec- 
tives for your site. Then keep your list somewhere so that you're forced to 
look at your objectives regularly, like the edge of your computer monitor or 
the bathroom mirror. Whenever you have a question about any aspect of 
the design, content, or development of your site, refer to your list of goals 
and make sure that your decisions remain true to your objectives. 

How will you measure success? 

You won't achieve success with your Web site project unless you can effec- 
tively measure its results, so be sure that you can voice your objectives in 
measurable ways. The more specific and quantifiable you can be, the better. 
For example, rather than just state, "The goal is reducing the telemarketing 
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DropBooks- 




staff," assign an amount and a time frame to make an objective quantifiable, 
such as, "The goal is reducing the telemarketing staff by 20 percent in 
6 months." Doing so helps you make sure that you're taking the necessary 
steps to achieve that goal. 

om do you want to visit your Web site? 



Consider your audience above all else. If you're creating a sales site for real 
estate investors, you should probably take a different design approach 
than if you're creating a game site for 12-year-olds. If you're not sure what 
12-year-olds want on a Web site, round some up and ask them. 

Clarifying the target audience of your Web site should be a key factor in how 
you plan and develop your site, from the vocabulary you use to how public 
you make the information. For example, a site for doctors might include 
complex medical terms, whereas a site for patients needs more common 
language. Similarly, an architect might create a Web site with a public sec- 
tion where potential clients can view photos of completed projects and tes- 
timonials, and also create a password-protected section where current 
clients can view plans as they're being developed. 

What do you want a user to gain from visiting your Web site? 

One of my favorite benefits of a Web site is instant information at 1 a.m. 
without having to talk to anybody or wait on hold. Take time to consider 
what you want your visitors to learn from your site, and then make sure that 
the information is front and center in your design and development plans. 

What do you want users to do after or on visits to your Web site? 

The more specific you can be about what you want visitors to do on your 
site, the better. Do you want visitors to buy a product, hire you to perform a 
service, join an association, call and ask for an appointment, sign up for a 
newsletter, or just tell their friends and family how cool your Web site is? 
Whatever you desire, you want your site's design to encourage visitors to 
take that action and to make it as easy as possible for them to do so. 

Do you expect to make money on your Web site? 

If your answer is "Of course I do!" that goal should shape everything you do 
as you design the way visitors will use your site. Pay special attention to the 



Fred's Fine Furniture defined goats 



To help you appreciate how the planning 
process for a Web site could work, I'll use 
the fictitious business, Fred's Fine Furniture, 
as an example. After you complete the ini- 
tial questionnaire earlier in this chapter, you 
should create a list of goals that looks some- 
thing like this: 

v 0 Promote Fred's furniture store. 

v 0 Describe and showcase Fred's custom 
furniture services. 



j> Help customers easily find Fred's contact 
information, store hours, and location. 

j> Encourage site visitors to register their 
tastes and furniture wish lists. 

is Sign up visitors for Fred's e-mail news- 
letter. 
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section "Establishing a budget" later in this chapter, to make sure that you 
see a return on your investment. 

Besides being potential cash generators, Web sites can help you be more 
o^mpetitive, advertise your store or services, schedule and inform staff, 
Stjil reduce travel and other types of expenses. Some of the most successful 
Web sites are designed to save money by reducing long-distance phone 
charges and other customer-support expenses. 



Creating a content list 




All the text, graphics, and multimedia elements that you want to display on the 
pages of your Web site are commonly referred to as the content of the site. To help 
guide your work and planning, your content list should include all photos, graphics, 
biographies, product descriptions, maps, and other items that you might want to 
feature on your site. 

The best way to start creating a content list is to brainstorm all the things you think 
you might want on the site, such as contact information, product descriptions, 
logos, photos, graphics, and biographies. 

The content list is a valuable tool that you can refer to as you develop your project 
plan, site map, and task list. As you continue to develop the project plan and ulti- 
mately the site, you'll probably discover more things that you want to add to the 
content list, so make sure to create it in a way that's easy to add to and edit as you 
progress. 

A program like Microsoft Word (or, if you prefer, Excel), is an excellent tool for this 
task because you can easily make additions and move content around as you 
develop your list. 

Use the content list as you organize your site content (see Chapter 3) and you're 
likely to think of additions to the content list as you work on that step. For example, 
as the About Us page is created on the Fred's Fine Furniture site featured in the 



Fred's Fine Furniture content 


> 

list m 


Continuing with Fred's Fine Furniture as an 


Photos that provide a tour of the showroom 


example, a content list might look like this: 


Map to the showroom 


Company logo 


Credit policies 


Contact information 


Welcome message for the home page 


Photos of each piece of furniture 


Description of the newsletter and invitation 


Descriptive paragraph for each piece of 


to sign up 


furniture 


Company description for the About Us page 


Pricing and ordering information 


Biography and photo of Fred 
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sidebars, Fred might realize that he wants to add a picture of the store, a map to the 
store, and some text describing the company. 

DropBooks^ a task list 

The task list should be the heart of your project plan. It's the list of tasks that must 
be accomplished in order to meet your goals and launch your Web site. 

You can create a task list in many ways, including a few software programs designed 
to help with project management. If you're creating a relatively simple Web site and 
have a very small team, you need only a list with a few notes and dates attached to 
each task. If you're working on a more-complex project with a team, you might want 
a program like Microsoft Project, which includes a variety of features designed to 
make it easy to plan and track tasks over time. 

When you create your task list, keep in mind that gathering your content is among 
the most time-consuming aspects of your Web site project. Many people underesti- 
mate how long it takes to gather all the photos, text descriptions, biographies, and 
other elements you may want in a Web site. Break down the task of gathering con- 
tent this way: 

Gather existing content: You might already have much of the content 
you need in brochures, press releases, or other materials related to your 
company or organization. 

Digitize your text: If you're including existing content in your site, you 
might still have to do some work to get it all in digital format, where text is 
converted into a word-processing or other text file. 

Digitize images: If you already have photos you want to use, those images 
might have to be scanned. Even if you already have digital photos, before 
you can add them to a Web page, they must be in the correct format and 



Fred's Fine Furniture task list 

Register a domain name for the Web site. 

Evaluate and select a Web site hosting 
company. 

Create a list of all the main sections and fea- 
tures of the site. 

Identify which products to include. 

Create and gather descriptions and photos 
of furniture. 

Design a few special offers and coupons to 
be featured. 

Create a registration questionnaire for the 
newsletter. 




Write the first three e-mail newsletters to 
send to registrants. 

Create a site map that details the main sec- 
tions and subsections and describes how 
pages will be linked. 

Design the front page, each main section 
front, and the internal pages. 

Optimize images and integrate content into 
the page designs. 

Test, test, and test some more. 

Prepare and implement a marketing plan. 
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optimized, a process that helps them to be downloaded as quickly as possi- 
ble over the Internet. (You can find step-by-step instructions for preparing 
and optimizing images for the Web in Chapter 4.) 

geate new content for your site: For example, you might want to create a 
pto tour of your shop (to feature on the front page) or write or update 
biographies of key personnel. 





Setting a timeline 



With your task list ironed out, you're ready to create a timeline. Several popular pro- 
grams can help. Microsoft Project can help you define a task, specify how long it 
should take, and then associate it with other tasks on a timeline. If you don't want to 
spend the money on Microsoft Project or take the time to learn this somewhat com- 
plex program, you can create a simple project plan in any calendar program or even 
in a spreadsheet or word-processing program. 

Your main goal is to create a timeline that can be adjusted if someone misses a dead- 
line or if a project takes more (or less) time than expected. 

Setting and enforcing deadlines can help you stick to your timeline: Even if you're 
working on a Web site by yourself, or with a very small team, setting deadlines can 
be one of the most important parts of your project plan — and your best chance of 
finishing. Most good Web sites are never-ending projects because you can always 
add more content and develop them further — although you shouldn't let it keep 
you from getting your site launched. Set a deadline for at least the first phase of 
development, and then hold yourself to it. 

Be sure to give yourself a realistic timeframe to do a good job, and factor in a little 
more time than you think you need, especially if you're new to Web design. Tying a 
deadline to a special event or occasion, even if you're creating a personal site, can 
help make you stick to the date. For example, set a launch date for a family Web site 
on an occasion like your grandma's birthday so that you can make it a surprise for 
her. Or, plan to publish the redesign for your small-business site in time for a trade 
show or annual sales event. When a deadline has a specific date and a clear goal 
associated with it, it's easier to take the deadlines seriously. 



Establishing a budget 

"How much does a Web site cost?" is often the first question asked by someone who 
decides that they want a Web site. But, if you think about it, it's a little like asking 
how much it costs to build a house — the answer depends on how many rooms you 
want, whether you want a marble or cement staircase, and whether you want a 
swimming pool in the backyard. You may have no idea how much it costs to build a 
home. After all, different contractors provide different price quotes based on how 
experienced they are or the kinds of materials they plan to use. If you're planning to 
build the house yourself, it becomes your job to figure out whether the features you 
want are reasonable and affordable. 



Fortunately, most Web sites, at least the kind you're likely to build yourself with the 
templates and instructions provided in this book, don't cost nearly as much as a 
house. Before you can set a realistic budget, you need to break down the project into 
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pieces (by following the steps outlined earlier in this chapter) and then start adding 
prices to the task list in your project plan. Determining the cost of each element of a 
Web project helps you manage the cost and scope and estimate the overall costs. 
Ampng the key costs you can expect are the ones in this list: 

^ f^^freb hosting: This service can cost as little as a few dollars a month or as 

much as a couple hundred dollars, if you plan to include audio and video files, 
which require more space on a server and more bandwidth to download. 

\^ Domain names: A domain name costs about $5 to $10 per year, although 
you might want more than one domain name for the same site. (You can find 
tips about hosting and registering domain names in Chapter 2.) 

\^ Your personal time: If you're building a site yourself, one of your biggest 
costs is likely to be the time you spend working on it. 

\^ Software programs: The tools used to create a Web site can range from free 
to expensive. At the very least, consider getting an image-editing program 
like Photoshop CS3 ($650), or Photoshop Elements ($99) — a fine alterna- 
tive if you are not working with a lot of graphics. For Web design, I find 
Adobe Dreamweaver ($399) is well worth the price. 

\^ Consulting services: Another major cost for do-it-yourselfers is any consult- 
ing service you use to augment your own skills. For example, you might hire 
an editor to review the text for your site or hire a programmer to create 
complex, interactive features, like a password-protected section where you 
keep clients informed as you work on their private projects. 

)^ Shopping system: If you want a shopping system, compare the costs of a 
few and then include a rough estimate until you make a final decision. (You 
find recommended services in Chapter 14.) 

As you put together your budget, start with the clear-cut costs, like paying for a 
domain name and hosting, and then move on to other items specific to your needs. 
After you have a price quote for each element and begin putting the pieces together, 
you can distinguish the more-expensive features and better decide which ones you 
can afford now and which ones to add later. 



Preparing for updates and maintenance 

The Web provides a powerful vehicle for businesses and nonprofit organizations to 
present their own side of any story and to get the word out quickly when tragic 
events, bad press, or other crises arise. 

Don't wait for an emergency to happen to find out whether you're prepared to add 
new information to your Web site quickly, and don't fool yourself into thinking that 
just because you don't manage a daily Internet newspaper, you don't have to worry 
about making speedy updates. 

With a little planning and some key systems set up in advance, you can be prepared 
for events that require timely information — whether an international crisis stops air 
travel, a flood closes your nonprofit, or an embarrassing event makes your CEO 
cringe and forces the real story to be told as soon as possible. 



Part I: Laying the Groundwork 



Most organizations develop Web sites that are updated weekly, monthly, or even 
annually More sophisticated sites might link to databases that track inventory or 
update product listings in real time, but even high-end sites are often ill prepared 
to update special information quickly 



ar^gffew things you can do to be prepared for timely updates on your site: 



\^ Make sure that you can send new information to your Web site quickly. 

Many Web sites are designed with testing systems that safeguard against 
careless mistakes, but these systems can add hours, or even days, to the 
time it takes to add new information to your Web site. Work with your tech- 
nical staff or consultants to make sure that you can update your site quickly 
if necessary. You might have to create a new section that you can update 
independently from the rest of the site or override the regular update 



]^ Ensure that you can easily update important sections of your site. 

Consider building or buying a content-management system that uses Web- 
based forms to post new information to your site. This type of system can 
be designed to change or add information to a Web page as easily as filling 
out an online order form. You need an experienced programmer to develop 
a form-based update system. Many Web consultants offer this kind of serv- 
ice for a reasonable fee. For example, this method works if you're a real 
estate agent and you need to change listings or a calendar event. Include 
password protection so that you control access to the form. As an added 
benefit, a form enables you to make updates from any computer connected 
to the Internet, so you can update your Web site even if you can't get back 
into your office. 

)^ Identify and train key staff to update the site. With the right systems in 
place, you don't need to have much technical experience to make simple 
updates to a site, but your staff needs some instruction and regular 
reminders. Make sure to also develop a schedule for retraining to ensure 
that no one forgets emergency procedures. An extremely serious emergency 
could happen tomorrow or might not happen for years — you never know, 
so being prepared pays off in the end. 



Don't go it alone! The best Web sites are developed by a team of people with a vari- 
ety of skills, including writers, designers, programmers, and multimedia producers. 
If you're developing a relatively small, simple Web site, you might not need a lot of 
people with specialized skills on your team, but the more you can divide the work 
among experts, the better. Although the instructions and templates included with 
this book are designed to help you do it yourself, you occasionally still have to seek 
out specialists — like a good editor to ensure that your text is well written or a pro- 
grammer who can create advanced features, like password-protected sections of a 
Web site. Throughout this book, I've worked hard to give you the best and easiest 
ways to create a Web site on your own, but I would be remiss not to point out that 
hiring a specialist or two once in a while can be a helpful way to complement the 
work you do yourself. Don't be afraid to ask for help if you need it. 




system. 



Assembling a team 



Chapter 2 

DroFJBa&lffj a Domain Name and Web Host 



In This Chapter 

^ Selecting a domain name 
^ Registering a domain name 

Understanding why you need Web hosting 
^ Choosing a hosting service 



The most important part of a Web site may be what you put on the pages: the 
information, services, or products you offer. To pull it all together, however, 
you also need a domain name and a server, a computer with special software where 
you can publish your site on the Web. 

In the first part of this chapter, you discover how domain name registration works, 
what to do if the name you want is already taken, and where you go to search for 
domain names for free. In the second part of this chapter, you find a list of questions 
you should ask before you choose a Web hosting service. Using the same service to 
host your Web site that you use to register your domain name is the simplest solu- 
tion, but not always the most economical, or the one that is most likely to best serve 
your needs. The information you find here will help you choose among the many 
services available. 

Whether you're creating a Web site for your business, hobby, or family, you'll want 
to follow the steps in this chapter to register a domain name and select a Web host. 
You start creating the pages of your Web site in Part II, but the preliminary steps in 
this chapter ensure that everything will be set up when you're ready to launch your 
new Web site. 



Finding and Registering Domain Names 

The address for a Web site is its domain name. For example, Wiley Publishing, 
the company that published this book, has a Web site with the domain name 
www . wiley . com. The company also has a Web site with the domain name 
www . dummies . com, for the For Dummies book series. 

Even before you start building a Web site, I recommend that you register your own 
domain name. The process is simple and painless and costs less than $10 per year. If 
you don't register a domain name, your Web site's address will be an extension of 
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the domain that your service provider registered and will probably look something 
like this: 




. serviceprovider . com/users /wiley 



ilter a domain name, you can point the name wherever your Web site is 
hosted, and your address should look more like this: 



www. wiley . com 



Choosing a qood domain name 




Your domain name is your calling card — it should be short and sweet and easy to 
say and write. If your Web address is too long or complex, it's hard for anyone to 
remember or type on a keyboard. The best domain name for your site is easy to 
remember, easy to convey (it can be said in one simple sentence), and easy to spell. 



A shortened version of your business name may seem like a better domain name 
because it requires less typing, but if your customers know you by your full name, 
they may be confused. For example, the official site for American Airlines is 
www . a a . com, but the company was smart enough to register more than one name, 
so if you type www. americanairlines . com, your browser goes to the same site. 

When you're tossing around ideas for a domain name, keep these rules in mind: 

\^ Domain names aren't case sensitive. For example, you can get to my Web 

site by entering www. digital family, com or www. DigitalFamily . com. 
(See Figure 2-1.) I prefer to capitalize the D and Fin my domain name when I 
print it on business cards or other collateral, because it makes the domain 
name easier to read. 
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Figure 2-1 : Both www. DigitalFamily. com and www. digital 

f ami ly . com take you to the same Web site. 
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Any characters that appear after a domain name extension are case 
sensitive (the dot-com or dot-org part of the address, for example). Thus, 

www. JanineWarner . com/books isn't the same address as 

www . JanineWarner . com/Books. 



though you can use a hyphen or an underscore in a domain name, it's 
generally simpler to use a combination of words run together. For exam- 
ple, you can register www. the-digital-f amily . com, but that's harder to 
convey verbally because you have to explain the hyphens. If you simply use 
www. digital family . com, you can say, "My address is Digital Family dot 
com, all one word." 

Domain names cannot contain spaces, periods, apostrophes, or other 
punctuation. 

Make sure that your domain name doesn't violate a trademark. You 

can do a simple trademark search at www . uspto . gov. If you're starting a 
business or concerned about violating someone's trademark, consult an 
attorney. 



Searching for an available domain name 

You can register any domain name that hasn't already been taken by someone else. 
Finding out whether a name is already in use is easy — and free. To see whether a 
domain name is already registered, do a simple search at any domain registration 
Web site. All domain registrars check the same master databases that track all 
domain names on the Web. Hundreds of sites offer the service; the following steps 
use landl . com as an example, but most work the same way: 

1. Use a Web browser to visit a domain name registrar. 

In this example, I'm using www. landl . com. 

2. In the Search area on the registrar's site, type the name you want to register. 

In Figure 2-2, I'm searching for www . bookkeeper . com. 

3. Click to begin your search. 

The results of your search are displayed. (If you use www . landl . com, 
for example, you click the Go button.) The results for a search on 
www . bookkeeper . com (which not surprisingly was already taken) are 
shown in Figure 2-2. 

4. If the name you want isn't available and you don't like the alternatives 
offered, you can enter another name to see whether it's available. 
Domain registrars don't limit the number of names you can search for in 
any given search session. 
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Disputing a domain name 



name — either your personal 
company name — is already 
taken, and you want to have it (or don't like 
what someone else is doing with it)? 



Unless the owner has opted for private reg- 
istrations, you can find out to whom a 
domain name is registered by searching in 
the Whois database, a central registry of all 
domain registrants on the Internet. One site 
where you can search this database is 
www . networksolutions . com/whois, but 
most domain-registration sites include a 
More Info link for finding out about a taken 
domain. Most registration listings in the 
Whois database include the street address, 
phone number, and e-mail address of the 
person or business that registered the 
domain name in addition to information 
about the server or service provider that 
hosts the domain. 

If you have your heart set on a registered 
domain name, you can contact the owner 
and try negotiating. Many people have reg- 
istered names that they aren't using, and 
if you find one that's registered but not in 
use, the owner might be willing to sell for a 



reasonable price. I know many people who 
have picked up great domain names for 
$500 to $1,000. 

To date, the courts seem to be applying the 
same laws to domain names that they apply 
to trademarks. For example, if you have a 
legal trademark such as Levi, and someone 
registers www . levi . com before you do, you 
can probably go to court and force the 
person to give you the domain name, 
although domain name disputes can be 
lengthy and expensive. If you don't have a 
trademark, you may have no alternative 
than to try to buy it from the person or 
choose another name instead. 

If you think you have a case against some- 
one who has taken your name, don't bother 
the registration service with your complaint. 
Domain registrars don't handle domain 
name disputes; they just register names on 
a first-come, first-served basis. Instead, talk 
to the guilty party directly. If that doesn't 
work, take the matter to court. If you can get 
a judge to rule that you're right, the domain 
registration service revokes the name and 
lets you have it. 
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Figure 2-2: If the name you want isn't available, most registrars offer a list of recommended alternatives. 
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Don't get frustrated if you find that the domain name you want is already taken. You 
can almost always find a name that will serve you well if you try a few variations. 
Here are a few tips for finding a suitable variation: 
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a word or phrase that indicates geographic location or makes the 
le more specific: For example, if www . news . com is taken, consider 

www . PointReyesNews . com or www . WestMarinNews . com. 



Sometimes a different name that has similar meaning can work: For exam- 
ple, you can try to register www. PointReyesReports . com. 

Try looking for playful names: For example, www. Accountant . com is 

taken, but you might still find www . FunnyAccountants . com or 
www . FrugalAccountants . com. 



Before you choose a close variation (or any domain name, for that matter), always 
check for sites whose names are similar to yours. Don't choose a name that's too 
close to someone else's if they are a competitor or if they have a site you would be 
embarrassed to be associated with. Similarly, consider whether others have already 
set up sites with your domain name but a different domain name ending. 



Registering yow domain name 

The specifics of registering a domain name vary among the services but the basic 
domain registration process is similar. Typically, after you perform your search, you 
are given instructions for registering the name, as well as offers to buy other kinds of 
services. In most cases, you need to select or decline options that the service has to 
offer and then proceed to pay for the services you selected. Common types of serv- 
ices, in addition to registration, are 




\^ Hosting: Many registration services also offer Web site hosting (covered 
later in this chapter). 

\^ E-mail: Typically, you have the option of creating one or more e-mail 



addresses associated with your domain name. 

\^ Privacy: Most services allow you to choose whether your contact informa- 
tion as the owner of this domain name is readily available to others through 
a search on the Whois database. Most services charge a fee for private reg- 
istration, which is kind of like having an unlisted phone number. 

In addition to registering your main domain name — the one you plan to hand out to 
colleagues and clients or friends and family — my best advice is to register every 
variation and misspelling of your name that you can think of and direct those 
domain names to your Web site. Just because some people didn't do well in the 
third-grade spelling bee doesn't mean that they don't have money to buy your prod- 
ucts or services online. 

Directing more than one domain name to the same Web site is a relatively simple 
technical detail that you can arrange through your Internet service provider or 
the company where you register the name. And, it's not that expensive. At the 
time this book was being written, godaddy . com charged $9.99 per year 
www . networksolutions . com charged $14.99; and www . landl . com charged $5.99. 
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Register your ou/n name 

iends that they should register 
_ _ _ es as domain names because 
owning your own name is a key part of 
protecting your online reputation. A per- 
sonal Web site serves as a great way to pro- 
mote yourself, whether you are job hunting, 
developing a consulting business, or simply 
want to share your story with the world. And 



because search engines tend to give prior- 
ity to keywords that match domain names, 
your site should score high when someone 
searches your name if you Ve registered the 
domain. Even if you don't plan to use your 
domain name right away, registering it will 
prevent anyone else from setting up a site 
at your name. 



Also consider registering the same name with different domain endings, such as 
. org, . net, and, most important, . com. The educational Web site Whyville, for 
example, registered whyville . org (the domain ending used by most nonprofits), 
but they also registered whyville . com because many people will assume that's the 
address. Owning these additional domains can also prevent you or your visitors 
from potential embarrassment or misrepresentation. 




Most people consider the . com version of a name the most valuable, but if the . com 
version is unavailable, registering the . net, . biz, or . info versions may be a fine 
alternative. Just make sure that the site that has the . com version isn't a direct 
competitor or a site that you would be embarrassed by if your visitors found it 
accidentally. 



Technically, when you register a domain name, you are leasing it, not purchasing it, 
which means it's possible to lose a domain name. Make sure your registration 
remains valid by renewing it when your registration service requires. 



Understanding topAeVel domains 

When you search for a domain name, you need to determine not only the first part of 
the name but also the ending, commonly called top-level domains or TLDs. Table 2-1 
provides a list of the most common domain name endings, their intended purposes, 
and their restrictions. 

The . com domain has emerged as the most valuable because it's the best recognized 
and the one that people are most likely to remember. However, all these domains 
work the same way in terms of directing users to a Web site address. For example, 
www. smith . com, www. smith . net, and www. smith . org work the same way on 
the Internet. 




Whether you use the www at the beginning of a domain name depends on how the 
domain is set up on your Web server. Most servers are set up so that a user is 
directed to a Web site with or without the www . Similarly, servers can be configured 
so that additional names can be added before the domain, such as 

news . google . com or maps . google . com. 
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Domain Name Endings 
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Top-level domain 


Used By 


Restrictions? 


Dks 


Commercial organizations; by far the most 
popular domain ending 


No 


• 


T"\ /*~\ '\~ 

n.6 l 


Internet services; used increasingly by people 
wno oon t get tne . com names tney want 


No 


• 


org 


iMonprotit organizations 


No 


• 


biz 


Businesses, a newer aomain, used increasingly 
by businesses that don't get the . com domain 
names they want 


No 


• 


name 


Individuals 


No 


• 


info 


Informational sites 


No 




• 


mobi 


Mobile sites 


No 




• 


aero 


The air-transport industry 


Yes 




• 


coop 


Cooperative associations 


Yes 




• 


museum 


Museums 


Yes 




• 


gov 


The United States government 


Yes 




• 


edu 


Accredited colleges and universities 


Yes 




• 


mil 


The United States military 


Yes 





Comparing country domains: ,t(/, .us, and .uts 

Nearly every country in the world now has its own domain, such as . us for the 
United States, . am for Armenia, . br for Brazil, . uk for the United Kingdom, and 
. zw for Zimbabwe. 

A few foreign country codes have become popular in the United States because they 
represent common acronyms, such as . tv, which many assume stands for televi- 
sion but is really the domain name for the country of Tuvalu. (You can find a Tuvalu 
Web site at www . tuvula . tv.) Similarly, . ws is assumed to mean Web site (and is 
even listed that way on some registrar sites), but it's the country code for Western 
Samoa. You can register a name with the . ws or . tv domain even if you don't live in 
one of those countries, but some countries have restrictions, and country domains 
are often more expensive to register than . com or . org names. 
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Questions to Ask of Potential 
kJ^tmq Serf/ ices 

Tmer yb^Wegister your domain name, the next step is to arrange for some kind of 
Web hosting service, such as DreamHost, shown in Figure 2-3. For the purposes of 
this book, I'm going to assume you don't want to run your own Web server, which is 
much more complex than building a Web site and not necessary for anyone who 
isn't running an extremely large Web site. 

How do you find a Web host with all the features you need for your Web site? And, 
how do you even know what to ask? 
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Figure 2-3: The DreamHost service offers competitive rates for accounts that can handle multiple sites, each 
with their own domain names, which makes it easy for me to host sites for a few of my family and 
friends. 



The best place to look for a Web host is also the most obvious: Look online! If you 
search for Web hosts in a search engine, you find millions of matches to choose 
from. For more qualified recommendations, ask around and get references from 
people you trust, especially those with Web sites you admire. 

After you narrow your options, shop around. Running a Web server is an increas- 
ingly competitive business, and not all companies offer the same features. Before 
you select a Web host, consider what you want on your Web site and make sure that 
you find a service that meets your needs. Your goal is to find the provider with the 
best collection of services within your budget. The following sections highlight a few 
questions to ask as you explore the features that different services offer. 
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"HovO much do you charge) 



n 



Choosing a 

DropBoofe 

special ser 



Choosing a Web host is a little like choosing a cell phone company or a long-distance 
theory, all phone companies provide the same capability to make a phone 
you probably know, in practice, they offer vastly different rate plans and 
special services. 



My best advice is to get a good start on the development plan for your site before you 
shop around for a service provider so that you know which kinds of services you 
need. (You can find more information about planning a Web project in Chapter 1.) You 
might decide, for example, that you want 24-hour technical support so that you can 
get help at night after work, but you don't want to pay extra for secure financial 
transactions because you don't plan to sell products online. 

In general, the big-ticket items at Web hosting services are: 



Bandwidth: Bandwidth measures the carrying capacity of a connection on 
the Internet. Compare it to a garden hose and its capacity to transport 
water: The larger the diameter of the hose, the more water it can carry. 
Bandwidth works the same way: The greater the bandwidth, the faster the 
transmission of information. Bandwidth gets expensive if lots of people visit 
your site, because more visitors mean more use of the connection. If you 
want to offer streaming video or audio files, they can also use up a lot of 
bandwidth, and you'll have to pay a premium for hosting. 

Disk space: The bigger your site — the more images and especially the 
more sound files, video, and animation files you include — the more you'll 
pay for the disk space to host it. Because video files are much larger than 
images or text files, video takes up much more hard disk space and requires 
more bandwidth to be viewed. As a result, providing many hours of video 
on your site can be expensive. 

E-commerce: Some Web hosting packages include secure e-commerce capa- 
bilities and sophisticated programming options. Unless you're planning to 
sell products or services on your site or to publish large amounts of video 
or sound files, you'll probably do fine with the simplest or lowest-level Web 
hosting package your service provider offers. 

Streaming media: If you want to offer audio, video, or Flash animations on 
your Web site, check whether your hosting service features the capability to 
stream your multimedia files. It's a nice option: Streaming is what enables 
visitors to your site to start playing a video or audio file while it is down- 
loading, instead of having to wait for the entire file to download before it 
can be started. 



"bo you provide e-commerce services)" 

Many Web hosting services, such as those provided by Yahoo!, shown in Figure 2-4, 
provide e-commerce features in addition to hosting and domain registration all in 
one place. If you're thinking of starting a business or taking your existing business 
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online, you may want to make sure your service provider can handle e-commerce 
transactions. If you plan to sell a lot of products, I also recommend a shopping cart 
system, which is a program that enables visitors to add products to a checkout page 
that|tracks and tallies selected items as a visitor moves through your site. You can 
ing cart systems separately, but many service providers, such as Yahoo!, 
pping cart features as part of their online store services. (You find more 
information about selling products on the Web in Chapter 13.) 
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Figure 2-4: Some Web hosting services, such as Yahoo!, provide e-commerce capabilities. 





"bo you offer technical support?" 

If you run into trouble uploading or maintaining your site, you might need to contact 
your hosting company to find out specifics about connecting to its Web server. If you 
want to use more-advanced services, such as an e-commerce system, you're even 
more likely to need its help. The bottom line: Technical support is important, and it's 
always a good idea to make sure you can get help when you need it. 

Some Web hosting services have knowledgeable technical support staff on call 24 
hours a day; others might never answer the phone but respond instead to e-mail 
inquiries. Before you even sign up for service, e-mail a few questions or call the tech 
support line of the service providers you're considering to see how long it takes 
each one to respond to your initial questions. If you have trouble getting your initial 
questions answered from a Web hosting service, you'll probably have even more 
trouble getting help after the Web host has your money. 

Most Web hosts post frequently asked questions (FAQs) on their Web sites. FAQs 
can be a great place to get answers to common questions and to find out about 
common problems other users are having — before you even sign up. 
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Expect your Web host to give you basic assistance, such as helping you understand 
the specific aspects of how to log on to its server and upload your pages. However, 
few Web hosts provide help with Web design and development, so don't judge them 
bacHy if they don't give you advice about the design or graphics for your site. 



"Which backup systems 
do you haVe in placeY 1 



Backup systems are crucial on the Internet — technical problems are common, 
servers go down, and the contents of a Web server can be lost if it's not backed up 
regularly. Any reputable service provider should have a regular backup system in 
place. If someone balks when you ask about the backup system, the provider proba- 
bly isn't reliable or well run. 

Always keep a backup of your Web site on your own computer. You're probably 
doing this already if you created the site on your hard drive, but you should keep an 
extra copy of the site on an external hard disk or a CD. If you use consultants to do 
any of the work for you, get copies of their work. Similarly, if other members of your 
team are working on the site, make sure you collect their work in one place and keep 
it backed up. 



"Can 1 host more than one domain name?" 

As you compare options, you might notice that some providers charge more for 
packages that enable you to host multiple domain names. You might choose a pack- 
age that supports multiple domain names if you want each member of the family to 
be able to register their own domain name and set up their own site separately or if 
you run multiple companies or information sites. For example, you can set up www. 
JeanDoher ty . com, www . JoshDoher ty . com, and www . TheDoher tyFami ly . com 
as separate sites on the same account if it supports multiple domains. Although a 
Web hosting package that supports multiple domain names is generally more expen- 
sive, it might save you money compared to the cost of setting up a different Web 
hosting account for each Web site you want to create. 

Note that there's a difference between hosting multiple domain names that point 
to different Web sites, as in the example in the preceding paragraph, and pointing 
two or more domain names to the same site. If you want two names, such as 
www . TheDoher tyFami ly . com and www . TheDoher tys . com, to direct visitors to 
the same site, you can manage that situation with your domain name registrar and 
save the cost of a premium Web server account that supports multiple domain 
names. Check with your domain name registrar for more information on how to 
direct multiple domain names to the same Web server. 
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In This Chapter 

Exploring the many ways to create a Web site 
^ Designing your Web site 

Reviewing Web design and graphics programs 
^ Understanding how Web pages work 
^ Exploring HTML 
^ Styling Web pages with CSS 



Over the years, Web design has evolved dramatically, and creating Web sites 
has become much more complex. Fortunately, the tools and services now 
available make many aspects of Web design easier, and make even the most compli- 
cated features simpler than ever to add to your site. 

The first commercial Web pages, which began appearing on the Internet in the mid- 
1990s, were limited to static photos and text with extremely simple layouts. Now you 
can create rich media Web experiences with audio, video, interactive games, shop- 
ping carts, and complex designs that weren't even possible back then. 

To help you lay the groundwork for the options that are now possible, this chapter 
helps you 

Create a great-looking design that's easy to use and attracts and retains 
visitors. 

Make decisions about the underlying structure of a site — namely, how to 
organize the content on the site's pages and ensure that visitors can intu- 
itively use the navigation system. 

Understand what the leading image-editing Web design programs have to 
offer. 

Understand how modern Web pages are created using HTML (the HyperText 
Markup Language), CSS (Cascading Style Sheets), and multimedia. Although 
you don't have to look at the code to use the templates featured in this 
book, having at least a general understanding of how Web pages work can 
go a long way toward helping you understand which features can easily be 
added to a Web page and which ones require more training or specialized 
services. For example, creating a survey or poll on a Web site requires 
advanced programming skills, unless you use a service like 
SurveyMonkey.com, featured in Chapter 14. 



Part I: Lavinq the Groundwork 



If you like having the bigger picture before you get started on the practical applica- 
tions, this chapter is for you. If you just want to get to work on your first Web page, 
feel free to jump ahead to any chapter in this book. Just remember that this chapter 
to help you understand why some tasks on the Web are easy to do and 
are challenging. 



Appreciating the Marty Approaches 
to Web Design 

If you've never created a Web site, you may not realize how many ways you can pub- 
lish photos and other information on the Web, or how many software programs and 
service providers you can choose from. You've probably seen Web sites in many 
styles, but you may not realize that the different looks of those sites sometimes 
depend on the type of technology used to create them. 

This list briefly describes some of the types of Web sites you can create: 

Online photo album: One of the fastest and easiest ways to put photos 
online is to use one of the free online photo album sites, such as Flickr.com, 
KodakGallery.com, or Shutterfly.com. Most photo sites make their money by 
charging for prints, which they're happy to send to you or your loved ones 
for about 20 or 30 cents apiece. 

Free online service: Several online services, such as Geocities.com, 
Angelfire.com, and Tripod.com, offer free Web sites. The catch is that these 
companies then sell advertising on your pages, and you have no control 
over which ads run next to your words and pictures. 

Blogging software: Millions of people now have blogs, or online journals, on 
the Internet. These sites' popularity has spawned a variety of software pro- 
grams designed to facilitate easy updates, such as Blogger.com. A blog may 
be your best option if you want to make frequent updates to your Web site. 
You can even add a blog to a Web site you created in a program like 
Dreamweaver. This approach, covered in Chapter 10, combines the best of 
both worlds. 

Predesigned template: I included a collection of templates in this book so 
that you can easily create a variety of common Web sites, such as a portfo- 
lio site or wedding site. To use the templates featured in Chapters 6 through 
8, you need the Web design program Adobe Dreamweaver, and an image 
program, such as Adobe Photoshop Elements. Creating a site based on a 
template is much easier than creating a site from scratch, and you can 
always edit and customize templates to suit your preferences. For a quick 
look at what you can do with the companion templates, check out the color 
insert in this book. 

Database-driven: The most-sophisticated Web sites on the Internet, such as 
the online store at Amazon.com or the news site at CNN.com, were created 
using complex programming and databases. Combining a database that 
records information about users with the capability to automatically gener- 
ate pages enables Amazon to greet you by name when you return to its site, 
track your orders as you buy books, and even make recommendations 
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based on your previous purchases. Although these kinds of advanced fea- 
tures are quite expensive and complex to create, you can add many similar 
features, such as an online shopping cart, by using the online services cov- 
ered in Chapter 13. 



Designing \lour Web Site 



No matter how technically sophisticated a Web site is or how creative its writing, 
most people notice a site's design first. Make sure that you leave plenty of time and 
reserve funds in the budget to develop an appropriate and attractive design for your 
Web site. The right design is one that best suits your audience — and that may or 
may not mean lots of fancy graphics and animations. To pinpoint the right design for 
your site, follow these guidelines: 



Before you develop the design, think about whom you want to attract to 
your Web site. A gaming Web site geared toward teenagers should look 
much different from a Web site with gardening tips or an online banking site 
for adults. 

Review other sites designed for your target market. Study the way other 
sites use images, set up navigation, and organize information. You don't 
want your site to look exactly like your competition, because you want your 
site to stand out (and you shouldn't just copy someone else's design), but 
you can certainly gain useful ideas from reviewing other people's sites. 

Keep in mind how your design decisions might affect download times. 

Consider your audience's time constraints, attention span, and (most impor- 
tantly) goals. If you design your site to provide information to busy business- 
people, you want fast-loading pages with few graphics and little or no 
animation. If you design your site for entertainment, your audience might be 
willing to wait a little longer for animation and other interactive features. 



Creating a consistent design 

Most Web sites work best, and are easiest to navigate, when they follow a consistent 
design. Here's a case in point: Most readers take for granted that books don't change 
their design from page to page and that newspapers don't change headline fonts and 
logos from day to day. Consistency is one of the primary tools used in books and 
newspapers to help readers easily distinguish different elements and follow a story 
or theme. 

As you lay out your Web page, keep related items close to one another and be con- 
sistent about how you design similar content elements. This type of organization 
makes following information visually much easier. Viewers should instantly under- 
stand which pieces of information are related to each other. Distinguish different 
kinds of information by their 

Design: Make sure that similar elements follow the same design parameters, 
such as type style, banner size, and page background color. To ensure a 
consistent style, define a set of colors, shapes, or other elements that you 
use throughout the site. Choose two or three fonts for your Web site, and 
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use them consistently. Using too many fonts makes your pages less appeal- 
ing and harder to read. 

You can easily get dazzled by all the affects, filters, and tools you can create 
Lia^in image editor or add to a Web page by copying and pasting some code, 
bjii't fall into the trap of using fancy features just because you can. ("Look, 
Ma — I made the text on my Web page blink in neon pink!") Keep in mind 
that the most important thing is to make your photos and Web pages look 
good and download quickly on the Internet. 

\^ Location: The position of elements on a page can strongly affect the amount 
of attention they receive. Many Internet studies have shown that text and 
images toward the top of the page get the most attention. 

\^ Prominence: Give elements of similar importance the same weight on a 
page. If you use too many different elements on a page or on the same Web 
site, you can confuse your viewers. 

Strive for consistency in your designs — except when you're trying to be unpre- 
dictable. A little surprise here and there can keep your Web site lively. 




Mapping the structure: Organization, 
navigation, and links I 

Helping visitors get around your site is a critical part of your site's design. Regardless 
of how much content you have on your site, the time-honored Web design tricks you 
find in this section help you organize content into pages, develop a navigation 
system, and identify where to place links strategically throughout your site. 

Organizing the contents of your pages 

As you start planning the organization of your pages, consider these questions: 

When visitors arrive at your home page, where do you want them to go? 
I \^ How will visitors move around your site? 

1^ How will visitors find the information that's important to them? 

A good way to help answer these questions is to imagine that you're a typical user of 
your site. For example, you might say, "If I were a busy executive who came to my site 
looking for a new couch for my living room, what would make it easy for me to find it?" 

Using your answers as well as your content list, decide which information you want 
to appear on the home page and how to organize its subsections. This basic struc- 
ture of the home page and its subpages is typically the basis of a site's menu bar, one 
of the more-common navigational elements. All templates featured in this book 
include some kind of navigational menu that you can easily edit to include links to 
the main pages of your site, such as Home, Contact, and Products. Adding the menu 
bar to each page on the site provides visitors with a useful navigational tool because 
it lets them easily access main sections from anywhere within the site. 
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Here's an example of a menu bar you might create with a row of links to the main 
sections of a small-business site: 
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Home Page ~ About Us ~ Products ~ Services ~ Contact Info 




ate the bare bones of your site organization and navigation, think also 
about where you're likely to add content down the road. Be sure to ask useful ques- 
tions during the planning process: What will you do when you have more products? 
Where will you put the products? How will you locate those pages again when some- 
one wants to change a product price? If you're working on a publication, for exam- 
ple, consider how to build in new issues, how to link with new stories, and where to 
archive old information. 

Whatever you do, never let users "get stuck" on a page because the link is broken or 
labeled Under Construction. Good Web sites are always under construction. Let visi- 
tors know that new treats are coming by putting notices on pages that already have 
content. 

Streamlining the navigation 

A good Web site is designed so that users can navigate easily and intuitively and 
create their own paths to find the information most relevant to them. As you start to 
work on the design, make sure that users can easily access key information from 
more than one place in the site and that they can move back and forth between the 
main pages and sections. 



As you plan the navigation of your site, make sure that visitors can 

\^ Follow different paths to the same important information. It might seem 
repetitive at first, but providing more than one link to the same page makes 
it easier for visitors to find their way around your site. For example, if you 
have a family history section, you might want to link to that page from many 
other pages in your site, such as the page about your daughter's wedding as 
well as the page about your grandparents. 

Move back and forth between pages and sections. Links that help users 
move forward and backward through a site can be especially useful in a 
slide show or an image gallery. 

Add a search feature. If you have a lot of content on your Web site, con- 
sider adding a way for users to search through your pages. One simple solu- 
tion is the Google Mini Search Appliance, which you can search for at 
Google.com. 




Follow the three-clicks rule, which states that no important piece of information 
should ever be more than three clicks away from anywhere else on your Web site. 
The most important information should be even closer at hand. Some information, 
such as contact information, should never be more than one click away. 
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Reviewing Web Design and 
hies Programs 

\, JavaScript, and all the other techy stuff you need in order to create Web 
pages is much easier to manage when you use a Web design program, such as Adobe 
Dreamweaver CS3 or Microsoft Expression Web. To help you appreciate the differ- 
ences between these programs, you find brief descriptions and more in the following 
section. Then I review a number of image-editing programs to help you understand 
your many options in that arena. 




No matter which software programs you choose for image editing or Web design, the 
basic concepts are the same. Ideally, an image editor should optimize images so that 
they download quickly over the Internet, and a Web-design program should create 
pages that look good to all visitors, no matter which browsers they use. For this 
book, I chose Dreamweaver CS3 for creating Web pages because it is by far the most 
popular Web design program on the market — and an excellent option for creating 
pages that look good to a wide variety of visitors. I chose Photoshop Elements 5 for 
graphics because it can create great images for the Web, yet it's relatively easy to 
use and reasonably priced. If you prefer to use the more-professional Photoshop CS3 
instead, you should still be able to follow the instructions in this book because the 
program features I use are quite similar. 

Although I believe that Photoshop Elements and Dreamweaver are the best pro- 
grams for do-it-yourselfers on the Web, I wrote this section to help you understand 
the strengths and weaknesses of the most-popular Web-design programs so that you 
can find the program that's best for you now and in the future. 



Comparing Image-editing programs 

You can find many choices in the world of image-editing programs, from high-end 
programs, such as Adobe Photoshop, to "prosumer" (professional consumer) prod- 
ucts, like Photoshop Elements, to simple programs that you can download for free 
over the Internet. Here's a quick comparison of some of the most-popular image-edit- 
ing programs: 

Adobe Photoshop CS3: By far the most popular image editing program in 
the history of computer design, the powerful Photoshop CS3 lets you 
create, edit, and manipulate images. It's a professional tool, with a profes- 
sional price tag (about $650), so unless you have a big budget or you're a 
serious photographer or designer, Photoshop CS3 is probably more than 
you need (or want to pay for). You can download a 30-day free trial version 
at www. adobe . com/photoshop. 

1^ Adobe Photoshop Elements 5: Shown in Figure 3-1, Photoshop Elements 5 
features many of the same powerful tools as Photoshop CS3, but it's easier 
to use and costs only about $100. Elements provides more than enough 
power for almost anything you need to do on a Web site, including optimiz- 
ing images so that they download faster over the Internet. You find an intro- 
duction to Elements and instructions for creating and optimizing graphics 
for the Web in Chapter 4. 
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The difference between Photoshop and Photoshop Elements boils down to 
this: The expensive version is used by magazine editors and high-fashion 
photographers, for example, to perform painstaking, exacting work on their 
photos, to make flawless images that are optimized for print and suitable for 
^pwing by millions of people. (Given enough time, you can use Photoshop 
*?make a mule look like a supermodel.) For the rest of us, who just want to 
edit photos or perhaps create the impression that Uncle Ernie's basset 
hound is driving the lawnmower, Photoshop Elements 5 is all that's ever 
needed. You can download a 30-day free trial version at www. adobe . com/ 
elements. 

^ Adobe Fireworks CS3: This image-design program has many special fea- 
tures for creating attractive images on the Web. With Fireworks, you can 
create animated images and slide shows for your Web pages. You can also 
create images in Fireworks and use the special slicing tool to cut the image 
into pieces before exporting it directly into a fully functional Web page. This 
feature makes Fireworks a favorite among many designers who like to create 
their page layouts in Fireworks, and then slice them so that the images can 
be optimized for the Web, and let Fireworks automatically re-create the 
design in HTML. Because Fireworks is integrated with Dreamweaver, you 
can move back and forth between the two programs, which makes it easier 
to make changes to designs that use lots of images. You can download a 
30-day free trial version at www. adobe . com/ fireworks. 
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Figure 3-1 : Photoshop Elements is a great tool for creating and optimizing images for the Web, and it's more 

reasonably priced than Adobe's professional program, Photoshop CS3. 



\^ Free image-editing programs: Search the Web for free photo editor and 

you find many listed, but only a few that are even worth downloading. If 
you're willing to settle for a more-limited program to save money, consider 
the online editor at www. irf anview. com or download the popular GIMP 
(GNU Image Manipulation Program). You can find this open-source editor 
(available for Windows, Unix, and Linux) at www . gimp . org. 
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Comparing Web-design programs 

In the early days of the Web, people were using lots of different visual HTML editors. 

a few major ones are in common use on the Web: Adobe Dreamweaver 
oft Expression Web. Both programs are available for 

Adobe Dreamweaver CS3: By far the most popular choice among profes- 
sional Web designers, this award-winning program offers high-end develop- 
ment tools, excellent design features, and valuable support for all the latest 
Internet technologies. Dreamweaver features a wide collection of customiz- 
able palettes, floating dialog boxes, and toolbars, which makes it look more 
like an image editor than a word processor. If you're serious about Web 
design, this is the tool to use. That's why I chose Dreamweaver to feature in 
this book. If you don't have a copy of Dreamweaver yet, you can download a 
fully functional 30-day trial version for free by visiting www . Adobe . com/ 
dreamweaver. 

You find an introduction to Dreamweaver in Chapter 5 and step-by-step 
instructions for customizing the various templates featured in this book in 
Chapters 6, 7, and 8. When you're ready for more advanced design with 
Dreamweaver, you find a collection of online tutorials at www. digital 
family, com/ dreamweaver (shown in Figure 3-2), including excerpts of 
my book Dreamweaver CS3 For Dummies (Wiley Publishing). 
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Figure 3-2: You can find Dreamweaver tutorials on my DigitalFamily Web site. 



Adobe Contribute CS3: Contribute is designed to make it easy for anyone to 
"contribute" to a Web site. This reasonably priced program is easy and intu- 
itive to use, but it's not a stand-alone program. Contribute isn't designed to 
create Web sites — it's designed to help you easily update an existing site. 
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You need a program like Dreamweaver to complete a Web site from start to 
finish. Contribute is an ideal choice if you're creating a site in Dreamweaver 
using the templates in this book and you want to make it easy for other 
people who know little or nothing about the Web to update the site. 



icrosoft Expression Web: The newest contender in the Web design arena, 
[icrosoft Expression Web (shown in Figure 3-3) is a professional Web-design 
program designed to replace Microsoft FrontPage. Although Expression Web 
was launched as a completely new program from Microsoft, FrontPage users 
are encouraged to upgrade to Expression Web, and FrontPage is no longer 
being developed by Microsoft. You can download a free trial version at 
www. microsoft . com/ express ion. 
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Figure 3-3: The new Web page editor Expression Web enables you to create CSS-based designs. 



Understanding How Web Pages Work 

Web browsers such as Internet Explorer, Firefox, and Safari are designed to display 
text, images, and other files on a computer screen. Essentially, browsers read the 
HTML and other code that makes up the text in a Web page and use the code to 
interpret how the page should be displayed to visitors. 

Because HTML is a markup language, it's designed to "mark up" a page, or to provide 
instructions for how a Web page should look. Contrary to popular belief, HTML isn't a 
programming language, and it isn't capable of creating interactive features or even 
moving elements on a screen without help. For more-advanced features, like rollover 
effects, you need something more capable of interactivity, such as JavaScript. If you 
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want to collect information from visitors with a form or keep track of users' purchases 
as they move through your site, you need a robust programming language — like Perl, 
C#, or Java — that's capable of creating advanced Web systems, like shopping carts 
and interactive surveys. 




arting to worry that this book is getting a lot more technical than you 
expected, relax. I assure you, you don't learn any advanced programming in this 
book. I do, however, want you to understand that some tasks are relatively easy to 
do on the Web, like creating an online gallery where you can show off your photos. 
Other features are more complex to create, like a password-protected Web site or an 
online shopping system. 

Avoid doing the programming yourself by reading Chapters 13 and 14 — they have 
lists of online services that you can use to add these types of advanced features to 
your site. 



Using HTML and CSS together 

Most Web pages are now created using HTML and CSS. HTML came first, but CSS has 
become the darling of the Web because it enables designers to better format and 
position elements on a page. 

How the two work together can get a bit complicated, but you essentially use HTML 
to create the structure of a page, insert images, add line breaks, and perform similar 
tasks. Then you create styles in CSS that control how those elements look and where 
they appear on a page. 

All the templates featured in this book are written in HTML and formatted with CSS. 
In Chapters 5 through 8, you find specific instructions for using Adobe Dreamweaver 
to edit the templates and customize them to meet the needs of any Web site you 
want to create. I did everything I can to make these templates as versatile, and easy 
to use as possible, but the more you understand about CSS and HTML, the better 
you can customize them. 



HTM~What> Exploring HTML 

If you want to see what the code behind a Web page looks like in most browsers, you 
can choose ViewOSource to see the underlying code. If you're using Dreamweaver, 
shown in the following figure, you can click the Split button, in the upper-left corner 
of the workspace, to see the code and the design areas of the program at the same 
time. Split view in Dreamweaver is a useful way to keep an eye on what's going on 
behind the scenes and to find out how to use HTML as you go along. And, the two 
views are completely integrated, so if you select something in Design view, like the 
headline you see in Figure 3-4, the same text is highlighted in Code view. 
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Figure 3-4: The Split view option in Dreamweaver makes it possible to display in the workspace both the 

page design and the code behind the page. 



When you view the HTML code behind any Web page, you find text and other ele- 
ments surrounded by tags. If at first glance you think that HTML code looks like 
hieroglyphics, don't give up too quickly With just a little training, you can start to 
recognize at least some common tags, like the Hi tag (Heading 1 tag) that was used 
to format the headline on the page shown in Figure 3-5. 
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Figure 3-5: The H1 tag is highlighted in Dreamweaver Code view. 




Understanding the following basic principles of tags can help you figure out how the 
underlying code works: 



HTML tags are set off in brackets < > and include an opening and a clos- 
ing tag. For example, the tag that makes text appear in boldface looks like 
this: <b>. The corresponding close tag looks like this: <b>. A close tag, 
which always begins with a forward slash /, tells a Web browser to stop 
doing whatever the open tag started. Thus, if you want to make a word bold 
in HTML, you surround it by a <b> tag and a close <b> tag. Any text that 
appears between those two tags is then displayed in bold by a Web browser. 
(The text before or after those tags is unaffected.) 

1^ HTML includes many tags designed to be hierarchical. Examples are the 
Hi through H6 tags, which are ideally suited to formatting text according to 
its importance on a Web page. Reserve the Hi tag for the most important 
text on the page, such as a headline. H2 is ideal for subheads or secondary 
headings, for example. 
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)^ Some tags are more complex than the simple bold tag or the heading 

tags. These more complicated tags, such as those that create links or insert 
images into pages, are more challenging to use. 

fl}tLrfi&Zt, HTML is just text, and believe it or not, you can write an HTML docu- 
lain-text editor as simple as Notepad or SimpleText. If you ever try it, 
however, you're sure to quickly appreciate programs — such as Dreamweaver — 
that write the code for you. 



Styling Web pages With CSS 




Cascading Style Sheets (CSS) are now considered the way to design Web sites if you 
want to follow the latest standards and develop Web sites that are accessible, flexi- 
ble, and designed to work on a wide range of devices. That's why all the templates 
featured in this book are designed with CSS. 



The concept of creating styles has been around since long before the Web was born. 
Desktop publishing programs, such as Adobe InDesign, and even word-processing 
programs, such as Microsoft Word, have long used styles to manage the formatting 
and editing of text on printed pages. Using styles in a word processor, for example, 
you can create styles for common features, such as headlines, subheads, and cap- 
tions. CSS offers similar benefits, as well as a few that are unique to the Web: 




In print, as on the Web, styles enable you to combine a collection of for- 
matting options into one style and then apply all those options at one 
time. For example, you can apply Arial, bold, italic, and centered to any 
selected text in your document by using a single style that you might name 

frontpage -headlines. 

One of the most powerful aspects of CSS is that you can make global 
updates to a Web page or an entire site by simply changing a style. 

Suppose that you create a style for the headlines in your site that makes 
them appear large, blue, and bold. Then one fine day, you (or your clients or 
friends or family members) decide that all your headlines should be red 
rather than blue. If you aren't using CSS, changing all your headlines can be 
a huge undertaking — a matter of opening every Web page in your site and 
making changes to the font tags around your headline text. But, if you're 
using CSS, you can simply change the headline style in your external style 
sheet, and — voila! — your headlines all turn red automatically. 

You have the option of creating style sheets that apply to only one page in a 
Web site, or you can create an external style sheet that can be used to 
format all pages in a site. Using this approach, you can make changes across 
any or all pages in a Web site by simply altering the styles in an external 
style sheet. 

CSS also enables you to create styles to position elements on the page. In 

addition to creating styles for elements such as headlines, you can create 
styles that align images to the left or right side of a page, add padding 
around text or images, specify background and link colors, and create com- 
plex page designs. Using CSS in this way helps you more easily create a con- 
sistent look on your pages. 
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\^ You can even create styles for different viewing formats. An example is 
one style that's applied if a page is displayed on a computer screen, another 
style if the page is viewed on a cellphone, and another style for a page that's 
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sent to a printer. 

Using CSS (or page layout 



The key to understanding the way CSS works in page layout is to think in terms of 
designing with a series of infinitely adjustable containers, or boxes. Indeed, this 
approach to Web design is commonly referred to as the box model. Think of the box 
model this way: First you use HTML tags, such as the <div> (Vision) tag or <p> 
(paragraph) tag, to contain the content in a box. Then you use CSS to style each box, 
using attributes to control the position and alignment of each box, and specify such 
settings as margins, padding, and borders. 

Although you can use any HTML element for page layout, the <div> tag is used most 
often to create page layouts with CSS. The <div> tag simply creates a division in a 
Web page. Think of the <div> tag as a generic container — designed to hold text, 
images, or other content — or to make a division on the page, to separate one section 
of content from another. Unlike other HTML tags, the <div> tag has no inherent for- 
matting features. Unless CSS is applied to a <div> tag, it can seem invisible on a page. 
Yet the tag has a powerful purpose because any content surrounded by opening and 
closing <div> tags becomes an object (or a box) that can be formatted with CSS. 

I used the box model to create all the templates in this book. As a result, in order to 
change the size or positioning of a section of a Web page in one of the templates fea- 
tured in Chapters 6-8, you need to edit the corresponding style. When you create or 
edit a style that corresponds to a <div> tag ID, you can specify properties such as 
alignment, border, margin, height, and width to control how the <div> tag is dis- 
played on the page. In the template chapters, you find step-by-step instructions for 
editing the styles that control the positioning and display of <div> tags so that you 
can customize the page layouts in each template. 

Each <div> in the page templates has an ID, which corresponds to a style in the 
style sheet. The ID appears in the HTML within the <div> tag brackets, so that the 
browser knows which style to use to control the formatting of that <div> when it dis- 
plays the page. For example, all the templates have a <div> with the ID container 
that controls the overall size of the design area. If you look at the code, the <div> 
looks like this <div id= " container " >< /div>. In the corresponding style sheet, 
which you can easily access through the CSS Panel, you'll find a style called 
tcontainer, which controls the width and other settings for that <div>. If this all 
seems a bit confusing, don't worry too much at this stage. When you put all this 
theory into practice with the templates in Chapters 6-8, it makes a lot more sense. 



If you want to find out more about CSS, you can find many more lessons on how to 
create, define, and edit styles in my book Dreamweaver CS3 For Dummies (Wiley 
Publishing). 
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For generations, small-business owners have taken their mar- 
keting and design projects to printers, who carefully printed 
photographs and used desktop-publishing programs to create 
clever designs for their portfolios, brochures, and other marketing 
materials. 

Now an increasing number of small-business owners are doing it 
themselves, thanks to powerful yet easy-to-use tools like Photoshop 
Elements. If their grandparents could see these business owners 
today (and maybe they do), they would be amazed by all the ways 
that a computer can be used to create, edit, and alter graphical 
designs. 

In this chapter, you discover some of the extraordinary things you 
can do with a program like Photoshop Elements. You find out how 
to create images, like banners and buttons for Web pages, and then 
resize, crop, and edit those images. 

Perhaps most important in this book about creating Web sites, you 
find step-by-step instructions for creating and optimizing graphics 
that download quickly over the Web. 



You can use a number of competing image-editing programs to 
complete the tasks in this book. I recommend Adobe Photoshop Elements because 
it's based on the industry standard in image editing, Adobe Photoshop CS3, but is a 
lot easier to use and a lot less expensive. In this book, I use Elements 5, but earlier 
versions of the program also use the features 
covered in the step-by-step tasks. 



Introducing Photoshop Elements 

Although Photoshop Elements is a stripped-down version of its big-sister program, 
Adobe Photoshop CS3, it's still a powerful tool. The workspace, shown in Figure 4-1, 
is clean and simple yet features many tools and palettes — and loads of options for 
editing images and saving them for the Web. Adobe designed this program to keep 
the tools around the edge of the screen and to give you the largest possible work- 
space in the middle, although you can open and close palettes and move them 
around the screen to suit your preferences. 
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Figure 4-1 : Photoshop Elements displays a wide range of tools and palettes around the 

perimeter of the main workspace, where you can create and edit images. 



To help you become familiar with the program before you start on the tasks, this 
section introduces you to the way the workspace in Elements is organized and its 
main features: the Toolbox, the Options bar, the menu, and palettes. When you first 
launch Photoshop Elements, you're greeted by a Welcome screen featuring six 
choices. To access the program's main editing features, which are covered in the fol- 
lowing sections, choose Edit and Enhance Photos. 



The TootboK 

One of the first things you have to get used to when you use graphics programs like 
Photoshop Elements is that before you can do anything, like crop an image, you 
have to select the correct tool from the Toolbox. This feature works much like the 
toolbox you may have in your garage: You choose a hammer when you want to 
pound a nail, or a screwdriver when you want to turn a screw. 

Selecting a tool from the Toolbox is easy: Just click the icon that represents the tool 
you want, such as the T icon, for adding text to an image. The tricky part is knowing 
which tool to use for the job (which is similar to understanding the difference 
between flat-head and Phillips-head screwdrivers). Some tools are easy to identify: 
The Brush tool is for painting, for example, but others, such as the Clone Stamp tool, 
may seem confusing at first. 

The list of tools shown in Figure 4-2 is designed to help you appreciate all your 
options in the Toolbox. 
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Here's a hint: Some tools are hidden underneath other tools. If a Toolbox button has 
a small triangle in its lower-right corner, it means that multiple tools are accessible 
from the same button. To view these alternative tools, simply click and hold the visi- 
ble iool until a small fly-out menu appears, as shown in Figure 4-3. 



Rectangular Marquee 
Magic Wand 

Text 

Cookie Cutter 
Red Eye 
Clone Stamp 

Pencil 
Gradient 

Smudge 



Set Foreground color 
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Zoom 

Eyedropper 
Lasso 

Magic Selection Brush 
Crop 

Straighten 
Healing Brush 
Eraser 

Paint Bucket 
Rectangle 

Burn 



Figure 4-2: The Toolbox gives you a wide range of 
options for your image-editing arsenal. 
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Figure 4-3: The fly-out menus reveal more options 

under some of the Toolbox items. 
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Although you use many of these tools in the step-by-step tasks in this book to create 
and edit images for the Web, I can't possibly cover all the features in this program in 
this introduction to Web graphics. (If I did, I wouldn't be able to cover all the other 
important aspects of Web design.) If you want to learn more about creating and edit- 
, check out Photoshop Elements For Dummies, by Barbara Obermeier and 
'a, or (for more-advanced techniques) the Photoshop CS3 Bible, by Laurie 
Ulrich Fuller and Robert C. Fuller (both from Wiley Publishing). 





The Toolbox can appear in one long list down the side of the Workspace (refer to 
Figure 4-1), or you can drag it anywhere on the screen and adjust it to appear in two 
columns (refer to Figure 4-2). 



The Options bar 

Running across the top of the Elements workspace is the Options bar, shown in 
Figure 4-4. The Options bar includes drop-down lists, check boxes, and radio buttons 
that can be used to adjust the settings for any selected tool. For example, when you 
select the Brush tool, options are available for changing the size and shape of the 
stroke that will be created when you click and drag the Brush tool over an image. 
Switch to the Text tool, and the Options bar changes to feature font and size options. 
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Figure 4-4: The Options bar provides easy access to settings for each of the tools, 
such as the font and size options that correspond to the Text tool. 



The art of Undo and Redo 



With all the features, filters, and editing 
options in Photoshop Elements, trial and 
error is often your best strategy — and it's 
easy when you can use Undo, Redo, and 
even Revert to restore any image to its last- 
saved version. 

If you make a change to an image and then 
change your mind, just choose EditOUndo 
to undo it. If you aren't quite sure whether 
you made an improvement, try Undo and 



then Redo so that you can compare the 
image before and after the effect. Photoshop 
Elements includes many levels of Undo, 
so you can go back and forth over many 
steps until the image is just the way you 
want it. 

If you're a keyboard-shortcut fan, press 
Ctrl+Z to use Undo in Windows (or §§+Z on 
the Mac); for Redo, press Ctrl+Y (or §§+Y). 
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The menu bar 
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No program is complete without a menu bar at the top of the workspace (see 
k). Click the menu names and you can choose from a list of commands 
ijg options. If an ellipsis (...) follows the command name, the option 
launches a dialog box where you can apply a variety of features. Otherwise, the 
command "kicks in" automatically as soon as it's selected. 
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Figure 4-5: The menu provides access to most of the features in Photoshop 

Elements, including my favorite — the Undo option. 



The palettes 

As in every Adobe application, the Elements workspace is filled with palettes, which 
are small windows that hold formatting options and other settings. The various 
palettes provide tools to help you edit and examine images. To open a palette, 
choose it from the Window menu. For example, choosing WindowOColor Swatches 
opens a palette with color options. Note that each palette has a More button; click- 
ing More displays a list of additional commands. 



^2 ^ art " : P utt ' n 9 the Pages Together 



DropBo 



A palette can remain in its column on the right side of the workspace or be dragged 
into the main workspace, as shown in Figure 4-6, where I use the Special Effects 
palette to apply a drop shadow to selected text in an image. To move a palette, click 
it anjd then drag it by its tab, and then release it where you like. After you detach a 

the main application window, it gains its own title bar, for easier moving 
fication. 
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Figure 4-6: You can move a palette so that it's closer to whatever you're working on. 
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Cropping art Image 




Toolbox: 

j> Adobe Photoshop 
Elements (or a similar 
program) 
A digital image 



Time needed: 

Less than half an 
hour 




Because photos on the Web are generally small, one way to ensure that 
important features are visible is to crop out any material that's not essen- 
tial. The best strategy when cropping an image for the Web is to focus on 
the key elements in the image. You can cut off the top, bottom, or sides, as 
much or as little as you like, with the adjustable edges of the Crop tool. 

In this step-by-step task, you can see how using the Crop tool to remove 
the background helps focus attention on the subject. 



With an image open in Elements, select the Crop tool 
from the Tools palette. Because you can't retrieve 
cropped parts of an image after you save and close the 
image file, you likely want to work with a copy of your 
original image. 




2. Click and drag within the image to define the 
area you want to crop. Everything outside the 
cropping box is removed when you complete 
the crop. 
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3. 



To increase or decrease the size of the crop- 
ping box, drag the handles at the corners or 
edges of the cropping area. 



4. 



To complete the crop, double-click in the 
middle of the selected area or click the Commit 
icon (the green check mark) in the lower-right 
corner of the crop box. To cancel the Crop tool 
without cropping the image, click the Cancel 
button (the red circle with a line through it). 





5- When you complete the crop, the 
areas of the image outside the crop 
box are removed and the overall 
size of the image is reduced propor- 
tionately. The Crop tool remains 
active until you select a different 
tool from the Toolbox. 




Repeat Steps 2 through 5 to make an additional crop. Choose EditOUndo to restore the image if you're unhappy 
with the crop. When you save the image, your changes become permanent. 
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Resizing art Image 




Toolbox: 

j> Adobe Photoshop 
Elements (or a similar 
program) 
A digital image 



Time needed: 

Less than half an 
hour 




Resizing is important for two reasons: The images must be small enough to 
display well on a computer monitor, and the smaller you make the image, 
the more you reduce its file size and the faster the image downloads to a 
user's computer. To enlarge or reduce the dimensions of an image, you 
need to change the image size or the canvas size. Follow these steps: 



With an image open in Elements, 
choose ImageOResize. If you don't 
want your original image to lose 
quality, make a copy of it and resize 
the copy for your Web site. 
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2. In the Image Size dialog box, spec- 
ify a height and width for the 
image. In this example, I reduce the 
size of the image by 50 percent. 
The Image Size dialog box can be 
confusing at first because it has 
multiple options for changing 
image size and resolution. A simple 
strategy is to use the fields in the 
Pixel Dimensions area, at the top of 
the dialog box. Using these options, 
you can alter the height and width 
of an image to a specified size in 
pixels or enlarge or reduce the 
image by any percentage, as you 
see in this example. (Make sure 
that the Scale Styles, Constrain 
Proportions, and Resample Image 
check boxes are all selected at the 
bottom of the dialog box.) 
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Creating and opening images in Elements 



existing images in Photoshop 
t^fc**reate completely new images, 
and you can have multiple images open at 
a time, which makes it easier to combine 
images and create complex designs. 

To create a new document, choose FileO 
New, and in the New File dialog box, 
specify the Height, Width, Resolution, Color 
Mode, and Background color. You can alter 
any of the settings after an image is created. 

To open an existing image, choose FileO 
Open, find the image you want on your hard 



drive, click to select it, and then click Open. 
The image appears in a new window, ready 
for you to edit. 

If you try to open an image and don't see it 
in a folder on your hard drive when you 
know that it should be there, change the 
Files ofType field (at the bottom of the Open 
dialog box) to All Formats. Every image in 
the folder should now appear in the file list. 

When you create a new image in Photoshop 
Elements, you can specify many settings, 
including size, resolution, and color. 



0 Scale Stales 
SlConstrain Proportions 

0Kesarnple image: 



Bicubic 



3- If you checked the Constrain Proportions check box at 
the bottom of the dialog box in Elements, any changes 
you make to the height automatically affect the width 
(and vice versa), to ensure that the image proportions 
remain constant even if the height or width is altered. 



4- Click OK to resize the image. If you want to return the image to its previ- 
ous size, choose EditOUndo. When you save the image, the changes 
become permanent. Notice that the file size is reduced from 1.59 MB to 
407 MB. One benefit of reducing the physical size of an image in this 
way is that it can dramatically reduce the file size, which means that 
the image downloads faster over the Internet. 




Unless you know that you want to change an image's resolution, you can generally leave the default settings 
alone. (You can find instructions for changing the resolution later in this chapter, in the sections "Optimizing 
Graphics in GIF or PNG Format" and "Optimizing Photos As JPEGs.") You generally should edit images at a rela- 
tively high resolution and reduce them when you're ready to save the final version for the Web. 
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Optimizing Graphics in GIF or PNG format 



s 
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The GIF format has long been considered best for drawings, cartoons, 
and other images that have only a few colors. (As you see in the following 
section, the JPEG format is ideal for photographs and other images with 
millions of colors.) GIFs are also the best format to use when you want to 
create images that use a transparent background, a trick that makes images 
appear to "float" on a Web page. As the Web has matured, a third format, 
PNG, has gained popularity. The PNG format is superior to the GIF format in 
all ways except one: GIFs are better supported by older Web browsers, 
especially in the area of transparency. 

If your goal is to ensure that your pages display well to anyone who may 
ever visit your site, GIF is the safer option. If you want your images to look 
their best with the smallest file sizes, you produce better results with the 
PNG format. If you're not concerned that your visitors will be using older 
Web browsers, PNG is the better choice. In the step-by-step exercise that 
follows, I made the safe choice and used the GIF format, but the process is 
almost exactly the same, no matter which format you choose. 

When you use the PNG or GIF formats, you can reduce download time by decreasing the total number of 
colors used in the image, which makes it ideal for graphics that need only a few colors in order to display 
well, such as cartoons or simple logo designs. When you reduce the number of colors in a PNG or GIF 
image, you're essentially removing colors you don't need. If you take away too many colors, however, the 
change can be drastic (and look terrible); but if you limit the image to only the number of colors that are 
necessary, you might not even notice the difference, and the image downloads much faster. 

In this step-by-step task, you discover how best to reduce the number of colors in any image when you 
save it in either the PNG or GIF format using Photoshop Elements. 



Toolbox: 

j> Adobe Photoshop 
Elements (or a similar 
program) 

A digital image with lim- 
ited colors 



Time needed: 

Less than half an 
hour 














/SI 






7. Create a new image or open an 
existing image in any format in 
Photoshop Elements. Because you 
save a copy of an image when you 
use the Save for Web option, you 
don't have to worry about altering 
your original image. 
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2, Choose FileOSave for Web. In the Save for Web dialog box, choose GIF from the 
Optimized File Format drop-down list. 



Why only 72 PPl> 



When you save images for the Web, you 
should save them at a resolution of 72 pixels 
per inch (better known as ppi) using the 
Image Size dialog box. (See the section 
"Resizing an Image" earlier in this chapter.) 
Most computer monitors display no more 
than 72 ppi, so any number higherthan that 



is wasted on the Web because you're 
making your visitors download more pixels 
than they can see. However, if you want to 
print an image, you want all the pixels you 
can get, which is why most images you see 
on the Web look terrible when you try to 
print them. 
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3. If you're creating an image with a transparent back- 
ground, select the Transparency check box and then 
specify a matte color. The matte color should match the 
background color of the Web page where the image will 
be displayed. Using a matching matte color helps pre- 
vent "jaggies" from appearing around the edges of the 
image. To change this color, select the eyedropper from 
the upper-left corner of the dialog box and then click in 
the Matte field to open the color palette where you can 
select a color. You can also select any color in the image 
by clicking the image with the eyedropper. 
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4- To reduce the size of the image, lower the number of 
colors by entering a number less than 256 in the Colors 
field or by choosing a preset number from the Colors 
drop-down list. In this example, the image is reduced 
from 256 (which is the maximum number of colors a GIF 
can have) to 64. 




5. Notice at the bottom of the Save for 
Web dialog box that the original file 
size appears under the preview of 
the image on the left and the opti- 
mized file size appears under the 
preview on the right. Compare 
these numbers to see how much 
smaller the image is with the 
number of colors reduced from 256 
to 46. In this example, you can see 
that by reducing the number of 
colors, the image has been reduced 
from 155Kto 4.63K. 
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6. 





Reduce the number of colors fur- 
ther to make the file size even 
smaller — but don't go too far. In 
example! you can see that 

fee S2educed to only 
tne wmte text with the 
words Malibu, California disappear 
because not enough colors remain 
in the image to display the blue 
background color, the red text for 
Zuma Beach, and the white text. 
Also notice that the red letters are 
no longer smooth in the preview on 
the right. That's because even 
though the image appears to only 
use two colors, along the edge of 
the letters, many variations on blue 
and red are used to create a clean 
line between the text and the back- 
ground. With only two colors in the 
image, that smooth edge becomes 
jagged. 
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7. Adjust the number of colors and other settings 
until the image uses the smallest number of 
colors (and therefore has the smallest file size) 
without degrading the appearance of the image. 
In this example, the image was reduced to 32 
colors and a file size of 4.355K. 



8. After all the image settings are the way you want them, click OK. 
In the Save dialog box, name the image and specify where you 
want to save it on your hard drive. Then click Save. 




When you use the Save For Web dialog box, Elements automatically saves a copy of the image in the new 
format and leaves the original image unchanged. 
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Optimizing Photos As JPEGs 




Toolbox: 

j> Adobe Photoshop 
Elements (or a similar 
program) 

A digital image with 
millions of colors 



Time needed: 

Less than half an 
hour 




The JPEG format is the best choice for images with many colors, such as 
photographs or images that include shading or gradients. You can save any 
image in GIF, PNG, or JPEG format by using the Save For Web dialog box, 
but you produce the best results if you choose the best format for each 
image. That's because the best way to optimize images (make them down- 
load faster over the Web) depends on how many colors appear in the 
image. 

Also note that even if a photograph is already in the JPEG format, you can 
almost always reduce its file size (and increase its download speed) by 
using the Save for Web dialog box to optimize the image, as you see in the 
following steps: 




Create a new image or open an 
existing image in any format in 
Photoshop Elements. Because you 
create a copy of the image when 
you use the Save for Web dialog 
box, you don't need to worry about 
altering your original image. 
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2. Choose FileOSave for Web, and in 
the Save for Web dialog box, 
choose JPEG from the Optimized 
File Format drop-down list. 
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Save For Web 



Save an image to include in a Web page. 

Eovc photographs -as JPE'G ond inno jcs wilh limited -colors an GIF. 
The Image pnevie^ shows how image wl look usinc the cw roe nil setting; 




3- If the image, like the one shown in this example, is larger 
than the preview area in the Save for Web dialog box, 
choose the Hand tool from the upper-left corner of the 
dialog box. Then click and drag to position the most 
important elements in the image where you can see a 
better preview. You can also change the display size of 
the image by right-clicking directly over the preview 
image and choosing Fit on Screen or any of the magnifi- 
cation settings. 



4. To reduce the size of a JPEG image, use the slider to 
alter the Quality setting, or enter a number, up to 100. 
Compression is measured as a percentage: The lower 
the number, the higher the compression and the smaller 
the file size. 
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5. Notice in the bottom of the Save 
for Web dialog box that the origi- 
nal file size appears under the pre- 
view of the image on the left, and 
the optimized file size appears 
under the preview on the right. In 
this example, you can see that 
when the Quality field is set to 75, 
the image is reduced from 1.36 MB 
to 130.2K. 
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6. Alter the Quality setting until the 
image uses the greatest amount of 
compression (the greater the com- 
pression, the lower the number in 
the Quality field), without degrad- 
ing the appearance of the image 
too much. In this example, the 
Quality setting was reduced to 50, 
to achieve a file size of 69.75K, less 
than half the file size when the 
Quality setting was 75. 
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7. Keep a close eye on the preview 
screen as you adjust the Quality 
option. If you reduce the quality 
too far, you degrade the image's 
appearance noticeably. 
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5. After all the image settings are the way you want them, click OK, and in the Save 

dialog box, give the image a new name and specify where you want to save it on your 
hard drive. Then click Save to save a new version of the JPEG with the specified set- 
tings and preserve the original unchanged. 



Enlarging and reducing image display 



As you're working on images in Photoshop 
Elements, it's often helpful to enlarge or 
reduce the display size of the image so that 
you can view more of it on the screen or to 
zoom in on details you want to edit. You can 
use the Zoom tool to increase or decrease 
the size at which the image appears on your 
screen. 

First, click to select the Zoom tool from the 
Toolbox, and then click anywhere on the 
image to increase its display size. Alt+click 
(in Windows) or Option+click (on the Mac) to 
decrease the display size. Here's a tip: By 



changing the display size, you can figure out 
how much you may need to change the 
actual size of your image to make it appear 
the way you want on a computer screen. To 
do so, use the Zoom tool to size the image 
the way you want in your Web page, and 
then notice the percentage (displayed at the 
top of the screen, next to the filename). Then 
you know the number you need to enter in 
the Size field in the Image Size dialog box 
when you resize it using a percentage. 

To redisplay the image in its true size on 
your monitor, double-click the Zoom tool. 
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Combining. Photos and Text in a New) Image 



Dro 




Toolbox: 

Adobe Photoshop 
Elements (or a similar 
program that supports 
layers) 

Digital images 



Time needed: 

About half an hour 
(unless you get 
carried away) 




Creating a new image with photos and text is almost as easy as editing an 
existing image, such as the banners and buttons included in the templates in 
this book. 

In general, I find that the best method is to create a new image in Photoshop 
Elements and then copy in any photos or other graphics that I want to use. 
With the images in place, you can easily add text to pull it all together. Just 
follow these steps to create your own banners and buttons: 



7. 



In Photoshop Elements, choose FileONew to 
create a new image and specify the size, resolu- 
tion, and background color. In this task, I'm cre- 
ating an image that's 500 pixels wide by 380 
pixels high with a resolution of 72 ppi, in RGB 
color with a white background. 
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2. If the Layers palette isn't already 
open on the side of the workspace, 
choose WindowOLayers to open 
the Layers palette. (It must be open 
if you want to keep track of the 
layers as they're automatically cre- 
ated when you copy in images or 
add text to the image.) 
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3- Open any image or images that you 
want to add to the new file by 
choosing FileOOpen and selecting 
the image from your hard drive. 
You can open images in any of the 
many formats supported by 
Photoshop Elements, including 
JPEG, GIF, TIF, and PSD. 



4- When you're working with multiple 
images in Photoshop Elements, you 
may want to open the Photo Bin, at 
the bottom of the workspace: If it 
isn't already open, choose WindowO 
Open the Photo Bin. You can select 
any open image by clicking its 
thumbnail image. 
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Flying Shorebirds.jpg @ 100% (RGB/8) 




5. 




To copy an open image into the new file, first 
click to select the Move tool from the upper-left 
corner of the Toolbox. 
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File Edit Image Enhance Layer 



Select 



Filter View Window Help 



Drol 




6. Click to select the image to make it active and 
then choose SelectOAll. 



7- With the image selected, choose FileOCopy or press 
the key combination Ctrl+C (on Windows) or §§+C 
(on the Mac). 
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8. 



Here's the tricky part: You need to select the file 
where you want to add the image before you 
paste it. If the Photo Bin is open at the bottom 
of the workspace, you can select it there. You 
can also select any image that's visible in the 
workspace by clicking it. 



Chapter 4: Editing and Creating Web Graphics 



DropBopks 

1% Choose FileOPaste. 



, or use the key combinations Ctrl+V 
(on Windows) or §§+V (on the Mac). 
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10. To position the pasted image, click to select it 
and then drag it to the place where you want it 
to appear in the new image. For more-precise 
positioning, use the arrow keys — you can 
adjust a selected layer pixel-by-pixel in any 
direction. You can resize an image with the 
Move tool by clicking and dragging any corner 
to adjust the height and width. 



/ 7. To add and position additional 
images, repeat Steps 6 through 10. 
Notice in this example that the 
Layers palette displays three 
layers — the white background 
layer and a separate layer for each 
of the photos that have been 
pasted into the image. As I added 
those images, Photoshop Elements 
added the layers automatically. 
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Shore Birds Cast Shadows ® 100% (Layer 2 




/ 2. To add text to an image (whether or not it 

already has multiple layers, like this one does), 
you must first select the Text tool from the 
Toolbox. 
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13> When you select the Text tool, a 
new collection of options appears 
at the top of the workspace. There, 
you can change such text options 
as the color (shown in this figure), 
by clicking the color well to open 
the color selection palette and then 
clicking any color in the palette. 
Use the scroll bar, to the right of 
the palette window, to display more 
colors. 
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/4- You can also use the Text tool options at the top 
of the workspace to change the font size, face, 
and alignment. 
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Turning layers on and off or rearranging them 



Droplte®k&: 



when you're working on an 
any layers, it's handy to turn 
them on and off so that you can experiment 
with different combinations or clear the 
workspace while you work on a detail. By 
clicking the small eye icon to the left of any 
layer, you can make the layer invisible in the 
workspace. Don't worry — you can turn the 
layer back on by simply clicking in the same 
field again to make the eye icon reappear. 



That's the beauty of this feature: Now you 
see it, now you don't. 

You can also rearrange the order of layers in 
the Layers palette, which is how you can 
control which layer is on top in the image. 
To change the stacking order, click to drag 
the layer up or down in the Layers palette. 
The higher the layer is in the palette, the 
higher its position in the stacking order in 
the file. 
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15. To add text to the image, click to place your 
cursor where you want it and then type. You 
can add as much text as you want to an image 
and press the Enter (or Return) key to add line 
breaks. 



16. You can also use the text options at the top of 
the workspace to edit the text after you type it. 
To do so, simply select the text you want to 
change, and then choose any of the formatting 
options to alter the color, font, size, or other 
settings. To edit the words, click to select the 
text and then delete or type to replace it. 
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17. When you add text, Photoshop automatically 
places it on a new layer, which appears in the 
Layers palette. To move or edit a layer, you 
must first select the Move tool from the 
Toolbox. Photoshop Elements automatically 
selects a layer when you click it. 
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18. If a layer isn't visible in the workspace, you can 
ct it from-the Layers palette by clicking the 




offl|Yrairpfa^r. Notice that Photoshop 
iWsldfeflVQ ] 



preview of the contents of 
each layer to make it easy to identify the layer 
you want to select. 
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7 & To make layers even easier to identify, you 
can change the name of a layer: Right-click 
the layer and choose Rename Layer to open 
the Layer Properties dialog box window, 
where you can type a new name. 



20. You can continue to add text layers 
and images, and edit and adjust 
them, forever by repeating this set 
of steps. One of the best ways to 
become comfortable with using 
Photoshop Elements is to take 
some time to experiment with com- 
bining and rearranging text and 
images in multiple layers. 
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Editing Images With Multiple Layers 




Toolbox: 

j> Adobe Photoshop 
Elements (or a similar 
program that supports 
layers) 

v A digital image with mul- 
tiple layers 



Time needed: 

Less than half an 
hour 




One of the most-confusing features in a program like Photoshop Elements 
is the way it divides different parts of an image into layers. Essentially, 
layers enable Photoshop Elements to separate one image into multiple sec- 
tions, which can be edited independently That's what makes it possible for 
you to do things like edit text without affecting a photo underneath it or 
move separate photos around a photo montage independently until you 
place them just the way you want. 

Without layers, text would become "stuck" on a photo in a banner, like the 
one shown in this task, and you couldn't edit the text again after you added 
it to the image. This feature is especially useful for customizing the ban- 
ners, buttons, and other graphic elements included in the templates used 
in this book. 

When you add text, photos, or other elements to a new or existing file, 
Photoshop Elements automatically creates a new layer for each addition. 
Those layers can then be edited independently. Before you can edit text or 
an image containing a layer, however, you have to select the corresponding 
layer. That's where the Layers palette come in, as you see in this task. 



7. Open an existing image in 

Photoshop Elements that includes 
multiple layers, such as the banner 
shown in this task. 
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Choose WindowOLayers to open the Layers palette. In the 
Layers palette, click to select the layer you want to edit. In 
this example, I selected the layer that corresponds to the 
words LaFontaine Multimedia. 
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ct the tool that you need in 
tjf \£Jl [rlg^Tfritents of the layer. In this 
example, I selected the Text tool so that I can 
edit the words. 
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4- Use the selected tool to alter the selected 
image. In this example, I double-clicked the 
name LaFontaine to select it and then typed 
the name Warner in its place. 
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5. 



To edit text in another layer, you 
must again select the correspon- 
ding layer in the Layers palette. In 
this example, I selected the layer 
that contains the text in the lower- 
right corner of the banner image. 
Because I had already selected the 
Text tool, once the Text tool was 
selected, I simply selected the text 
I wanted to edit and replaced it by 
typing new text. 
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6. After you make changes to the text, choose 
FileOSave As and give the image a new name. 
This saves the changes without altering the 
original image. 



Chapter 4: Editing and Creating Web Graphics 7^ 



Dro 



besiqninq With Special Effects 



Stuff M 
Need to Knout 



Toolbox: 

j> Adobe Photoshop 
Elements (or a similar 
program that supports 
effects) 
A digital image 



Time needed: 

Less than half an 
hour 




Photoshop Elements includes a wide collection of special effects, including 
filters, layer styles, and photo effects. You can use these options to add 
drop shadows to images or text, create beveled edges, and even add artis- 
tic flourishes, like the painterly effects included in the Artistic collection, 
as shown in this task. 



In Photoshop Elements, choose 
FileONew to create a new image or 
FileOOpen to open an existing one. 
Then open the Artwork and Effects 
palette by either clicking the small 
arrow next to the palette title or 
choosing WindowO Artwork and 
Effects. 
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2. Keep the Layers palette open so that you can make sure that 
you're applying effects to the correct layer. (Choose WindowO 
Layers to open the palette.) By clicking and dragging the top of 
any palette, you can expand or reduce its height so that it takes 
up more or less room on the side of the workspace. 
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v7 Artwork and Effects 
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4- To apply a filter or another effect, 
click to select the layer you want to 
apply it to and then double-click 
the icon in the Layers palette. In 
this example, I selected the layer 
with the photo and double-clicked 
the Cutout filter to open the Cutout 
filter dialog box. Each of the artistic 
filters includes a dialog box like this 
one, where you can adjust the 
filter's effects. Notice, on the left 
side of this dialog box, a preview of 
the image, where you can see how 
the filter will affect the image. 



3. The Artwork and Effects palette has many options. You 
can switch among the different collections by clicking 
the category icons across the top of the palette and 
using the drop-down lists to select collections within 
each category, such as the many filter options shown 
here. 
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5. Click OK to apply the filter to the 
image and close the dialog box. 
Choose EditOUndo to remove the 
filter. To adjust the filter settings, 
double-click the filter icon in the 
Special Effects palette to reopen the 
dialog box. 



6. To apply text filters, such as the drop shadow, 
click the T icon at the top of the Special Effects 
palette to open the text effects options. Then 
click to select the layer. In this example, I 
selected the text layer with the words Beach 
Walks. With the text layer selected, double- 
click any text option and it's automatically 
applied to the text. 
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7. To remove a text filter, choose EditOUndo. To 
apply another filter, double-click the Text tool. 
In this example, I removed the drop shadow 
and applied a Beveled filter instead. You can 
apply multiple filters to the same element to 
create more-complex effects. 




Mastering photo editing requires lots of practice, and the best way to get it down pat is to experiment. 
Especially when you're working with advanced features, like filters and special effects, trial and error is a won- 
derful strategy. Applying different filters to text and images just to see what they do is a helpful way to find out 
what you can do with all these cool features. 
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In the ten-plus years that I've been writing about Web design, I've 
seen many changes — from the early days when you could create 
only simple pages with HTML 1.0 (before Web design programs like 
Dreamweaver even existed) to the elaborate designs you can create 
now using XHTML, CSS, JavaScript, multimedia, and more. 

If you're not sure what those acronyms mean, don't worry. I remember 
what it was like to figure out all this stuff, too, so I designed this book 
to introduce you to the basic concepts of Web design while keeping 
things as simple as possible. 

If you're eager to create a Web site as quickly as you can, feel free to 
jump ahead to Chapters 6, 7, or 8, where you find instructions for cus- 
tomizing the ready-to-use templates that come with this book. Before 
you do, I suggest that you at least skim through this chapter, which is 
designed to introduce you to Dreamweaver and to show you how to use 
this popular design program for some common tasks, such as customiz- 
ing CSS layouts, creating CSS styles, inserting images, and setting links. 



The high-end features in Dreamweaver make it the preferred choice for professional 
Web designers, and its easy-to-use graphical interface makes it popular among 
novices and hobbyists. You should know that in my effort to keep things simple in 
this book, I cover only a small portion of the features in this complex program. You 
can learn lots more about Dreamweaver in my book Dreamweaver CS3 For Dummies 
(Wiley Publishing). 

At the beginning of this chapter, you find detailed instructions for one of the most 
important features in Dreamweaver: the site Definition dialog box. Defining a site in 
Dreamweaver is important whether you use one of the templates featured later in 
this book or create your own, custom design using the instructions in the rest of this 
chapter. 
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Setting Up a Neut or Existing Site 




As ajgeneral rule when you create a Web site, you first create all the pages on your 
oVttfit©$ hard drive, where you can preview your pages in a Web browser and test 
ire^wore it's visible on the Internet. Then, when the site is ready, you transfer 
the files to your Web server, a computer with a permanent connection to the Internet 
that uses special software to communicate with Web browsers, such as Internet 
Explorer and Firefox. 

Because all the files you work with on your hard drive must be in the same relative 
location on the Web server, you need to store all your site's resources in one folder 
on your hard drive and identify that folder as the local root folder in Dreamweaver. 

As you progress through the site-definition process in the following task, you can 
create a new folder on your hard drive and designate it as your local root folder, or 
you can identify an existing folder if you're updating or redesigning a site. The loca- 
tion where you save the local root folder on your hard drive doesn't matter, as long 
as you identify it in Dreamweaver. Just be aware that if you move the local root 
folder, you have to go through the site setup process again so Dreamweaver knows 
where it is. 

When you're ready to publish a completed site, you transfer it to your Web server by 
using the Dreamweaver built-in File Transfer Protocol (or FTP) features. You find 
detailed instructions for publishing a Web site in Chapter 9. 



Working With an existing Web site 



If you're working on redesigning or editing a 
site that already exists, your first challenge 
is to get a copy of the site on your hard 
drive. Fortunately, Dreamweaver can help 
you download an existing site off a Web 
server with the same features you use to 
publish a site. All you need is the login infor- 
mation, username, and password to access 
the Web server. 

To download an existing site, first complete 
the site setup process featured at the begin- 
ning of this chapter and then create a new, 
blank folder where you store all files in the 
Web site. Then follow the instructions in the 
section "Setting Up FTP in Dreamweaver" 



in Chapter 9 to connect Dreamweaver with 
your server. After you establish a connec- 
tion, just click the Get button (also shown in 
Chapter 9) to download all files in the exist- 
ing site. 

After you have your site on your hard 
drive, you can edit and add pages using 
Dreamweaver, even if your site was created 
in another Web design program. However, 
if you're doing a major redesign, you might 
be better off to start from scratch, by creat- 
ing a new site in Dreamweaver and then 
copying the existing text, images, and other 
materials into the new pages. 
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Defining a Web Site in breamuteatfer 




is 



Toolbox: 

Dreamweaver CS3 

If you have them ready, 
any text, images, or other 
materials you want to 
use in a new or existing 
site 



Time needed: 

Less than an hour 




If the site-definition process seems a little confusing at first, don't 
worry; it's a quick, relatively painless process and you have to do it 
only once for each site. Just trust me — don't skip this preliminary step. 

Whether you're creating a new site or working on an existing site, the 
following steps walk you through the process of defining a local root 
folder for your Web site. 



/, Choose SiteONew Site to open the Site 
Definition dialog box. 
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2. 



Click the Advanced tab. Note: If you prefer, 
you can use the basic wizard that steps you 
through the setup process, but I find it faster 
and easier to view all the options at once using 
the Advanced tab. 
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Basic Advanced 



Category 



Testing Server 
Cloaking 
Design Notes 
Site Map Layout 
File View Columns 
Contribute 
Templates 
Spry 




3> 3. 



In the Category box on the left, make sure that the Local 
Info category is selected. This category should be open 
by default when you click the Advanced tab. 



4- In the Site Name text box, type a name for your 
site. You can call your site whatever you like; 
this name is used only to help you keep track of 
your sites. Many people work on more than one 
site in Dreamweaver, and this feature enables 
you to keep track of them by name. The name 
you enter here appears in the drop-down list in 
the Files panel and in the Manage Sites dialog 
box. You use this list to select the site you want 
to work on when you open Dreamweaver. In 
this example, I named the new site Designs for 
Dancing. 



Site Definition for Designs for Dancing 



Basic 



Advanced 



Category 



Local Info 



Local Info 



Remote Info 
Testing Server 



Site name: 



esiqns for Dancin 



Site name: 
Local root folder: 

Default images folder: 



C:\Documents and Settings\Janine Warner\My Do 



5- Click the Browse icon next to the Local Root 
Folder text box to locate the folder on your hard 
drive that you want to serve as the main folder 
for all files in your Web site. (Hint: The Browse 
icon in Dreamweaver always looks like a small, 
yellow file folder and is usually located at the 
right side of a text field.) If you're setting up a 
new site, create a new folder on your hard drive 
using the Create New Folder icon in the Choose 
Local Folder dialog box, and then select that 
folder as the local root folder. If you're setting up 
an existing Web site, select the folder that con- 
tains the files for that site to designate it as the 
Local Root Folder. 
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6. 





Click the Browse icon next to the Default Images 
folder field and select the images folder in an 
isting Website. If you're creating a new site, 

inside your local root folder, 
d select it. Although you 
don't have to identify an images folder, it has 
some advantages. For example, if you ever 
insert an image that isn't located in your local 
root folder, Dreamweaver copies it into the 
images folder you identify during the site-setup 
process. If you create an images folder, 
Dreamweaver copies images into the main 
folder. (You can also store images in other fold- 
ers within your local root folder.) 



Choose iocs! root folder for site Designs for Dancing: 
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7. For the Links Relative To radio buttons, leave the 
Document option selected unless you know that you 
want your links to be set up relative to the root level of 
your site. This setting controls how the path is set in 
links. If you're working on a site with other developers 
and you're not sure, check with your colleagues. If 
you're working alone on your own site, Links Relative to 
Document is the simplest option and should already be 
selected because it's the default option in 
Dreamweaver. 



8. In the HTTP Address text box, type the URL of 
your Web site. The HTTP address is the URL, or 
Web address, that your site will have when it's 
published on a Web server (see Chapter 2). If 
you don't yet know the Web address for your 
site or you don't plan to publish it on a Web 
server, you can leave this box blank. If you do 
fill it in, include http : / / at the beginning and / 
at the end. 



Links relative to: 0 Document O Site root 




HTTP address: 


http : ifwww , designsf ordancing . com _ 




This address is used for site relative links, and for 


the Link Checker to detect HTTP links that refer to 


your own site 





Case-sensitive links: RJUse case-sensitive link checking 



Cache: */ tnable cache 



9* Select the Use Case-Sensitive Link Checking 
check box. Unless you know for sure that you 
don't have to worry about the case of your file- 
names, selecting this box makes Dreamweaver 
ensure that the case matches for all your site's 
links (which many Web-hosting services 
require). 



10. Select the Enable Cache option. Dreamweaver 
creates a local cache of your site to quickly ref- 
erence the location of files in your site. The 
local cache speeds up many site-management 
features of the program and takes only a few 
seconds to create. 



Case-sensitive links: ^^^^^Sj^^^lfekfeh^ndl 



Cache: [^Enable cache 

The cache maintains file and asset information in 
the site. This speeds up the Asset panel, link 
management, and Site Map features. 
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/ /. Click OK to close the Site Definition dialog box and save 
your settings. If the folder you selected as your local 
site folder already contains files or subfolders, they're 
automatically cached and any files or folders in your 
site are displayed in the Files panel. In this example, 
because I'm creating a new site, only the images sub- 
folder is displayed. If you haven't checked the Enable 
Cache option, a message box appears, asking whether 
you want to create a cache for the site. Doing so is 
good practice because it helps Dreamweaver work 
more efficiently. 



12. if you work on more than one site in Dreamweaver, be 
sure to define each site the first time you work on it. 
After that, you can easily switch among defined sites by 
selecting the one you want to work on in the Files 
panel. You can define as many sites as you like in 
Dreamweaver. To load a different site into the Files 
panel, click the drop-down arrow next to the site name 
and choose the name of the site you want to display. In 
this figure, you can see that I'm opening the site named 
The Chocolate Game by selecting it from a long list of 
defined sites. You can see, toward the top of this list, 
the Designs for Dancing site. 
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Drop 



Naming Web pages 



^T^y?71jab^^re especially important in Web 
WiAe/lJb^eta* they're included in the HTML 
code when you set links. Over the years, I 
have received more e-mail messages from 
panicked Web designers because of broken 
links caused by filename conflicts than 
almost any other issue. Because these prob- 
lems usually don't occur until after a Web 
site is published on a server, they can be 
especially confusing and difficult to under- 
stand. Following a few simple pointers can 
help you avoid or troubleshoot filename- 
related problems: 

w When you save Web pages, images, and 
other files for your site, the basic rule is 
this: Don't use blank spaces or special 
characters in a filename. For example, 
don't name a Web page with an apostro- 
phe, such as cat 1 s page . html. If you 
want to separate words, you can use the 
underscore (_) or the hyphen (-). For 
example, cat-page .html is an accept- 
able filename. Numbers are okay in 
most cases, and capital letters don't gen- 
erally matter, as long as the filename and 
the code in the link match. 

The potentially misleading point is that 
links with spaces and special characters 
work just fine when you test pages on a 
Mac or PC, but the software used on 
many of the Web servers on the Internet 
don't accept spaces or special characters 
in links. Thus, links that don't follow 
these rules can be broken when you 
publish the site to a Web server. 



w All files in a Web site must also include 
an extension at the end of the filename, 
to identify the file type (such as .html 
for HTML files or . jpg for JPEG images). 

Dreamweaver automatically adds the 
.html file extension to the end of HTML 
files, but you may need to change your 
Windows settings if you want to be able 
to see the extension. Similarly, programs 
like Photoshop automatically add the 
extension on Windows computers; if 
you're using a Macintosh, you may need 
to add the extensions manually. 

Another confusing rule, and one of the 
most important, is that the main page 
(or frontpage) of your Web site must be 
named index.html or default.html, 
depending on your Web server. That's 
because most Web servers are set up to 
serve the index.html page first. To 
ensure that you use the correct name, 
check with your service provider or 
system administrator. (Some servers are 
set up to handle home.html, or 
default. asp for dynamic sites, but 
most commercial service providers 
serve index.html before any other 
page in any folder in a site.) The rest of 
the pages in your site can be named any- 
thing you like, as long as they don't 
include spaces or special characters 
(except for the dash or underscore). 




You can make changes and additions to a site by choosing SiteOManage Sites, selecting the site name in the 
Manage Sites dialog box, and then clicking the Edit button. The defined site then opens in the Site Definition 
dialog box, where you can make changes to any setting, such as selecting a different images folder or local root 
folder. Remember that if you move the local root folder on your hard drive, you need to edit the site definition to 
identify the new folder location. 
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Creating New Pages in breamvtieatfer 

In this task, I show you how you can use Dreamweaver's new collection of 
layouts to create a variety of one-, two-, and three-columned designs using 
CSS so that you can create your own custom page designs. In the tasks that 
follow later in the chapter, you find out how to turn a page design into a 
template you can use to easily create similar pages for a Web site with sec- 
tions that can be updated automatically You also find out how to add 
common features, such as images, text, links, and more. 

Whether you're creating a simple design or a complex one, it's almost 
always easier to start with one of the prestyled Dreamweaver layouts. By 
using one of these layouts, you start with not only some of the basics done 
for you but also a design that's optimized for a wide variety of Web 
browsers — no simple task when you consider that browsers don't always 
support CSS consistently. 

These Dreamweaver layouts aren't much to look at when you first open 
them. They're intentionally designed with a basic gray color scheme — 
fortunately color styles are some of the easiest to alter in CSS. If you're new 
to CSS, altering one of these layouts may seem confusing at first, but it's 
similar to editing the other templates featured in this book and certainly 
easier than starting from scratch. The following lesson is designed to help 
you appreciate how easy it is to create your own site design with the many 
predesigned layouts included in Dreamweaver CS3. 

Before you begin creating new pages, make sure that you completed the 
site-setup process covered in the previous task in this chapter. 



it 

Nee, 




Toolbox: 

Adobe Dreamweaver 
CS3 

Your own text and 
images to personalize 
the pages 



Time needed: 

About half a day 




7. To create a new page, choose FileONew. In the 
New Document dialog box, choose Blank Page 
from the options on the far left (as I've done 
here). Under the Page Type column, you can 
now select from many different file types, 
including HTML, XML, and PHP. To create a 
simple Web page, like the one I use throughout 
this book, choose HTML. 
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A fixed layout is generally an easier option to start with, but liquid designs have advantages because they're more 
flexible. You can find a longer description of the layout types in the Dreamweaver Help files, but essentially here are 
the options: Liquid layouts are designed to expand and contract depending on the size of the browser window; 
fixed layouts are centered within the browser and set to a width of 780 pixels; elastic layouts use the ems meas- 
urement to adapt to different text sizes and other variations in display; and hybrid layouts use a mix of options. 
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Layout: 
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1 column 
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2 column fixed, left sidebar, header a 
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2 column hybrid, right sidebar, header 

2 column liquid, left sidebar 

2 column liquid, left sidebar, header an 

2 column liquid, right sidebar 
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Two columns, all widths in pixels, with left 
sidebar, header and footer. 
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DocType: 
Layout CSS: 

Attach CSS file: 



XHTML 1.0 Transitional v 



Add to Head 



2. When HTML is selected in the New dialog box, 
a list of CSS layouts appears in the Layout 
Column. In the close-up view of this dialog box, 
shown in this figure, you can see that I selected 
a design that creates a two-column fixed layout 
with a header and footer. 



3- When you create a layout, you can choose to create 
internal styles or an external style sheet. I recommend 
that you create an external style sheet because you can 
then use the same styles across multiple pages. To 
create an external style sheet as you create a new page 
like this, use the drop-down menu next to Layout CSS: 
Select Create New File and then click the Create button. 
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4. In the Save Style Sheet File As dialog box, give 
the style sheet a name. You can use the default 
name that Dreamweaver suggests or change the 
name to something that has more meaning to 
you. Just be sure not to use any spaces or spe- 
cial characters in the name, and keep the .ess 
extension. In this example, I named the style 
sheet designs . ess. Click Save to save the 
style sheet and attach it to the new page at the 
same time. 



Part II: Putting the Pages Together 



^ Adobe Dreamweaver CS3 - [C:\Documents and Setti 



File Edit View Insert Modify Tent Commands Site Windov 



▼ Insert Common Layout Forms Data Spry Text Favorites 

• ' * .1- • <s ' 

designs.html* 






\\t\ Code 


^ Split 


jLbjj Design Title: Designs for Dancing 




— I- 


■ 1 1 1 1 1 1 1 1 


i i i i 1 i i i i 


100 ■ I 150 , I 200 i I 250 i Es? i : 

i i i i 1 i i i i 1 i i i i 1 i i i i 1 i i i i 1 i i i i 1 i i i i 1 i i i i IWi 1 1- 1. 1 i.i 


150 

1 1 1 1 1 1 1 


1 1 1 1 1 1 1 1 1 




Header 



5- Get into the (excellent) habit of saving a new 
page as soon as it's created. Choose FileOSave 
and give the file a name. Again, don't use any 
spaces or special characters in the filename, 
and be sure to retain the . html extension. I 
named this file designs . html. As soon as you 
save the file, it's also good practice to add a 
title right away by replacing the words Untitled 
Page with your own title at the top of the work- 
space, as you see in this figure. 



6. All Dreamweaver layouts include a collection of corre- 
sponding styles. As a result, to edit any of the elements in 
this layout, you must edit the corresponding style. First, 
open the CSS Styles panel (if it's not already open) by 
choosing WindowOCSS Styles, and then click the plus (+) 
sign next to designs .ess (or whatever you named your 
external style sheet) to open it. Dreamweaver displays all 
styles that correspond with this page. (Tip: Make sure 
that the All button is selected at the top of the CSS panel 
to display all styles.) 



!! ▼ CSS := 


C55 Styles 


t AP Element 






| All 


Current | 


All Rules 





▼ CSS 



CSS Styles 



AP Elements 



All 



Current 



All Rul 



es 



B designs. ess 
|— body 



\— .twoColFixLtHdr /container 



twoColFixLtHdr /header 
twoColFixLtHdr /header hi 
twoColFixLtHdr /sidebar 1 
twoColFixLtHdr /mainContent 
twoColFixLtHdr /footer 
twoColFixLtHdr /footer p 
fltrt 
fltlft 

clearfloat 



Properties for 1 


'.tvioColFinLtHdr ^container" 


background 


/FFFFFF 


border 


lpx solid /000000 


margin 


0 auto 


text-align 


left 


width 


780px 


Add Prooerty 




:i= 





7. 
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By following the common practice of using Div tags to 
"contain" elements on a page and styles, to describe how 
they should be displayed, Dreamweaver includes a Div 
identified as container in every layout. The container 
controls the overall width of the design area; to change 
the width of your design, you need to change the corre- 
sponding style. To do so, double-click the style named 
. twoColFixLtHdr #container to open it in the CSS 
Rules Definition dialog box. (The Div is the foundation of 
the box model, which I explain in Chapter 3.) 
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8. 




In the CSS Rules Definition dialog box, choose 
the Box Category from the left and then use 

tf^elcLta^hange the width as desired, 
ii ji|s jX s (J w\ ^Hanging the width from 780 
pixelsio HvO by replacing the number in the 
Width field. Limiting the width of your page to 
790 pixels is good practice if you want your 
page to display well in an 800-by-600 resolu- 
tion monitor. After you make any changes you 
want, click Apply to preview the results and 
then click OK to close the dialog box. 



CSS Rule Definition for .twoColFixLtHdr ^container in designs, ess 



Category 
Typo 

Dackqjound 
Blink 



border 
List 

Positioning 
Cxtcraans 



8ok 



790l 


V 


1 


-1 









Height 
Prtrtrihg 

M Seme for al 

Night: 
□ otto rn 



pixels y | 



pixels 



leFt: 



I bfclp 1 



Oear: 
MAtQln 

Top: 
Wght: 
Dattotn; 



| 5wne far al 



0 v 






sdto 


M 






0 


V 






arte 


_vj r- sis 



OK 



Coned 



Apply 



CSS Rule Definition for .twoColFixLtHdr #header in designs, ess 



Category 
Typo 



Dackcround 



El.' J 
Rnt 
border 
List 

Positionrg 

CxtGTBMfUS 



Background 



Background octor; #CCCCCC 
Background image 
Hepeet 
HLdJiiKJiiL 
Horizontal ptretiori 
iertfcd position 




OK 



Coned 



Apply 



9. The Header area of the page can be changed by 
simply typing a new header to replace the text 
that says Header. To change the color or other 
style options for the header, double-click the 
style named . twoColFixLtHdr #header to 
open it in the CSS Rules Definition dialog box. 
Click to select the Background category, and 
use the color well to change the background 
color. Choose the Type category to access font, 
size, and other text options. Click Apply to see 
how the settings look, and then click OK to save 
them and close the dialog box. To find out more 
about using the HTML heading tags, see the 
sidebar "Combining HTML headings and CSS." 




Dreamweaver includes a body class for each of these layouts and includes it in the name of each style. In this 
case, the body class is twoColFixLtHdr. You can remove the body class by deleting . twoColFixLtHdr 
from the front of each style name, but if you do so, you must also delete it from the body tag in the HTML code. 
To do so, first click the Split View button at the top of the workspace to open the HTML code, and then search for 
the body tag and delete class= " twoColFixLtHdr " . Although removing the class style is optional, it sim- 
plifies the rest of the style names by making them all shorter, which many designers find easier when working 
with style sheets. To save you from having to find the body tag in the HTML code, I leave the longer style names 
the way Dreamweaver creates them. 
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10. For the dressmaker's design featured in this 
task, I replaced the word Header with a graphic 
by simply deleting the text and choosing 
InsertOlmage to select my banner image. If you 
insert a graphic that's not in your local root 
folder, Dreamweaver automatically copies 
it into your images folder. Unless you have 
Accessibility Attributes turned off in the 
Dreamweaver preferences, you're also prompted 
to enter alternate text. Alternate text, which is 
displayed if an image isn't visible, provides a 
description of the image for visitors who are visu- 
ally impaired and use special browsers that 
"read" Web pages aloud. Type a description of 
your image in the Alternate text field in the Image 
Tag Accessibility Attributes dialog box. 
Alternatively, you can click to select any image 
and type a description into the Alt field in the 
Property inspector. 
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/ /. Notice that the banner didn't line up properly 
when I inserted it into the header in this layout. 
That's because the header is styled for text and 
includes padding in addition to an Hi tag. To 
make the banner fit in the header properly, you 
need to remove the extra space. First, double- 
click the style named . twoColFixLtHdr 
#header in the CSS panel. Then select the Box 
category, and change to 0 the number of 
padding pixels you find in the Right and Left 
fields under Padding. 
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12. The extra space at the top and bottom of the 
banner is caused by the HI tag. If you deleted 
this when you deleted the text, you won't have 
this problem, but it's easy to leave the HI tag 
behind. Here's a good way to remove any 
unwanted HTML formatting. First, click to place 
your cursor in the Header area. (It doesn't 
matter whether you select the image.) Then in 
the tag selector at the bottom of the work- 
space, right-click the HI tag and choose 
Remove Tag. 
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13. You can also change the font or color of any or 
all text on a page by changing the corresponding 
styles. If you aren't familiar with HTML, you may 
not guess that to change the font style for the 
entire page, you need to alter the Body style. 
That's because the <body> tag controls page- 
wide settings, like font face and link styles. You 
can use multiple fonts on a page by changing 
the font style for a specific section of text, but to 
change the default font for the entire page, 
double-click to select the <body> tag in the CSS 
panel, choose the Type category and use the 
drop-down list in the Font field to select a font 
collection. 



H. You can also edit styles by using the CSS Styles Property 
pane, which appears just below the CSS panel. For 
example, in this figure, I selected the style #sidebarl, 
and I'm changing the width to 220 pixels by editing the 
number of pixels specified in the Width field. By default, 
only style settings that have been defined are displayed 
in the Property pane. 
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15. If you want change the width of a column in one of the 
Dreamweaver CSS layouts, you need to alter the styles 
for both columns. One complexity of most Dreamweaver 
layouts is that the style for the sidebar Div has a speci- 
fied width, but the Div identified as mainContent uses 
a Margin style to control its positioning in relationship 
to the sidebar. As a result, if you change the width of the 
left sidebar, which I did in the previous step, you need to 
change the margin setting in the #mainContent style 
by the same amount. In this figure, I'm changing the 
margin of the #mainContent to 270 pixels by using the 
CSS Properties pane. I set the margin to a higher number 
than the width of the sidebar to leave a gutter between 
the two columns. 
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16. To change or remove a background color, such 
as the gray color in the sidebar, double-click 
the style name in the CSS Styles panel to open 
it in the CSS Rule Definition dialog box. To 
change the color, choose the Background cate- 
gory and then click the color well in the 
Background Color field. To remove a color, 
simply delete the contents of the Background 
Color field. If no color is specified, the color of 
the page background or surrounding container 
is used. In this case, the sidebar changes to 
white when I delete the color code. 



/ 7- Although the boundaries of Div tags don't dis- 
play in a browser unless you include a style to 
create a border, by default Dreamweaver CS3 
displays a thin line around Divs to aid you in 
your design work. You can turn these, and 
other invisible elements, on and off by clicking 
on the Visual Aids icon at the top of the work- 
space and selecting the options you want to 
display. You can hide all visual elements or 
choose to display any subset of them by select- 
ing them from the drop-down list. 
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For more information on font collections, see the later sidebar "Why so many fonts?" If the body tag isn't 
already defined with a style, you might find it easier to use the Page Properties dialog box, described in the sec- 
tion "Changing Page-Wide Settings with Page Properties," later in this chapter. 



You can adjust the margins and padding around images, Div tags, and other elements to control spacing and 
positioning. The simplest way to understand padding and margins is to remember this statement: Padding adds 
space to the inside of an element, and margins add space to the outside. The same statement is true whether 
the element is a Div tag, an image, a table cell, or anything else. If you want more space around a photo, for 
example, add margin space. If you want a gap between the edge of a Div tag and its contents, add padding. 
Here's an advanced tip: When you add padding, you increase the overall size of the element. For example, a Div 
that is 200 pixels wide and has 10 pixels of padding on each side expands to fill 220 pixels of space in the 
design. When you click an element, such as the sidebar Div in this task, Dreamweaver displays a series of 
slanted lines around the edge of the Div that represent the amount of margin or padding. 
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Combining HTML headings and CSS 
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ost common text formatting 
TML is the heading style. In 
HTML, you gain many advantages to using 
the heading styles (hi, H2, and so on) to 
style text that serves as titles or headlines. 
That's because heading styles are designed 
to be displayed in relative sizes no matter 
which text size users set in their Web 
browsers. When you use headings, HI is the 
largest, H2 is the next largest, and so on, 
decreasing in size through H6. Another ben- 
efit to using headings is that search engines 
generally give priority to keywords that are 
formatted with the HI or H2 tags, because 
the use of a heading tag implies that the text 
has greater importance on a page. 

Because you can redefine any HTML tag 
with CSS, you can alter the display of head- 
ing tags while still enjoying these benefits. 
You can also combine styles so that text for- 
matted with an HI tag can appear one way 



when placed within the sidebar of a page 
and appear another way when placed within 
the main content area. That's why many 
CSS layouts that come with Dreamweaver 
include styles like #header HI — because 
a style with that name redefines text that's 
formatted with the HI tag only if it appears 
within a Div that has the ID "header." (To see 
an example, check out the style named 
. twoColFixLTHdr #header hi in the 
two-column layout used in the section 
"Creating New Pages in Dreamweaver," ear- 
lier in this chapter.) 

You can apply Heading tags to text by 
selecting any text on a page and then using 
the drop-down list in the Property inspector 
at the bottom of the screen to select a 
Heading option, as you see in this figure. To 
create a style for a Heading tag, follow the 
steps in the "Defining New Styles in 
Dreamweaver" task. 
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Defining Neut Styles in breamuteatfer 
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Toolbox: 

Adobe Dreamweaver 
CS3 

A page or Web site 
where you want to add 
a new style 



Time needed: 

About half an hour 




Whether you create a new, blank page in Dreamweaver or start with one of 
the Dreamweaver CSS layouts, as described in the previous task, you can 
create your own styles to format text, images, and other elements in your 
pages. 

As you move through the steps to create a new style in Dreamweaver, you 
might be surprised by the number of options in the numerous panels and 
dialog boxes available for creating CSS. As you explore the possibilities, 
remember that you can leave attributes unspecified if you don't want to 
use them and that you can always go back and edit styles after you create 
them. 

To define a new style, either create a new document or open an existing 
HTML file and follow these steps: 
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In the New CSS Rule dialog box, choose a selec- 
tor type. In this example, I'm creating a class 
style. In the Name field, type a name. Because 
class styles must begin with a period (.), I named 
this style . imagecaption. For a description of 
the three selector options, and the naming con- 
ventions that correspond with each one, see the 
nearby sidebar "Understanding CSS selectors." 



Chapter 5: Getting Started with Dreamweaver 



New Rule 



DrODbS0Qi£S 



any tag) 

look of a specific tag) 
O Advanced (IDs, pseudo-class selectors) 



OK 



Cancel 



Name: .irnagecaption 



Define in: 0 designs. ess 

r^-J(New Style Sheet File)" 



designs, ess 



Help 



3- In the Define In area, select the This Document 
Only radio button to create an internal style 
sheet. In this example, I'm adding my new style 
to an external style sheet that's already 
attached to my page (the design . ess style I 
created in the previous task). To do that, click to 
select the Define In radio button and choose the 
name of the style sheet from the drop-down list. 
You can also choose to create a new external 
style sheet as you create a new style, by choos- 
ing the New Style Sheet File option from the 
drop-down list and then entering a name in the 
Save Style Sheet File As dialog box. Click OK to 
continue. 
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4. In the CSS Rule Definition dialog box, choose 
a category on the left. For this example, 
I chose the Type category to specify font 
options. As you can see in this figure, I chose 
the Arial, Helvetica, sans serif font collection 
and set the size to Small and the weight to 
Bold. (See the upcoming sidebar "Why so 
many fonts?" for more information about 
font collections.) Click OK to save the style 
and close the dialog box. 
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5- The new style appears at the bottom of the CSS Styles 
panel. You can change the order of styles by clicking to 
select a style name and dragging it to another position 
in the panel. 
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Understanding CSS selectors 

ate a new style, you first spec- 
r f the type of style you're cre- 
ating. When you create a new style in 
Dreamweaver, you can choose from these 
selectors: 

Class: Creates a class style that can be 
applied to any element on a page and 
can be used multiple times on the same 
page. You can name a class style any- 
thing you like, as long as you don't use 
spaces or punctuation. Class style 
names must begin with a period (.). If 
you select the Class option and neglect 
to enter a period at the beginning of the 
name, Dreamweaver adds one for you. 
After a class style is created, it's available 
from the Class drop-down list in the 
Property inspector. To apply a class style, 
select any section of text, an image, or 
another element on a page, and then use 
the drop-down menu in the Class or 
Style field in the Property inspector to 
apply the style. 

is Tag: Redefines an existing HTML tag. In 
this case, you're creating a new style that 
will override the existing rules for the 
selected tag or add formatting to an 



existing tag. When you alter an existing 
tag, you change the way all instances of 
that HTML tag appear throughout your 
page, unless you use the Advanced 
option to redefine a tag within another 
style. Tag styles are automatically 
applied when a tag is applied. For exam- 
ple, if you redefine the style for the HI 
heading tag, the style is applied when- 
ever you format text with the Heading 
tag. 

V Advanced: Creates an ID style, a contex- 
tual style, or any other advanced style 
option. ID styles must begin with a 
pound sign (#) and can be used only 
once per page. It's common practice in 
CSS layouts to use ID styles to control 
the appearance of Div tags. Contextual 
styles specify the display of one style 
within the context of another. For exam- 
ple, #sidebar hi defines a style for the 
heading tag only when it appears within 
a Div or other element that has the ID 
sidebar. 

You find out more about creating and using 
CSS styles in my book Dreamweaver CS3 
For Dummies, (Wiley Publishing). 
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6. To apply a new class style, like the one I created in this 
task, select a section of text in a Web page and then use 
the Style drop-down list to select and apply the style. 
For more information on how to apply other kinds of 
styles, see the nearby sidebar, "Understanding CSS 
selectors." 
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Creating and Using Templates 
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After you've spent a great deal of time creating a page design in 
Dreamweaver, you might be pleased to know that you can turn your 
designs into a template that you can use to create other pages more 
quickly for your site. When you save a file as a Dynamic Web Template 
in Dreamweaver, it becomes available from the New File dialog box, 
which makes it easy to use to create new files. But the greatest time- 
saving benefit of Dynamic Web Templates becomes evident when you 
want to make changes to a design after you've used it to create numer- 
ous pages, because you can use templates to make global updates 
across many pages at once. 

In most of the templates included with this book, I used the 
Dreamweaver Dynamic Web Template features. Reading through this 
task not only shows you how to create your own templates but also 
helps you better understand how to use and edit the templates 
included in the rest of this book. 

In this task, you learn how to save any page as a template, use the tem- 
plate to create new pages, and then edit the template to make global 
updates to those pages. 



7. You can turn any page in Dreamweaver into a template 
by using the Save As Template option. In this task, I 
build on what I did in the earlier task in this chapter, by 
turning into a template the page I created from a 
Dreamweaver layout. To begin, open a Web page in 
Dreamweaver and choose FileOSave As Template. 
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ave As Template 




Site: 



Designs for Dancing 




Description: 
Save as: 



Save 



Cancel 



Help 



2. In the Save as Template dialog box, make sure 
that the site you're working on is displayed in 
the Site field. (This should happen automati- 
cally if you completed the site-definition 
process; if you haven't, make sure to do so by 
following the steps in the first task in this chap- 
ter.) You can name the template anything you 
like, as long as you don't use spaces or punctua- 
tion. When you're prompted by with the Update 
Links dialog box, choose Yes to preserve any 
links to pages or images in the file. 



3. When you create a Dynamic Web Template, 

Dreamweaver automatically adds the . dwt extension. 
In this case, my file is named designs . dwt. As you can 
see in the Files panel shown in this figure, Dreamweaver 
automatically stores the new template in a folder 
named Templates. If you don't already have a 
Templates folder in your local root folder, Dreamweaver 
creates one for you when you save your first template. 
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4. 



Before you use your template to create other pages, you 
need to create Editable regions in the template. Editable 
regions are areas of the template that can be edited when 
the template is used to create new pages. To create an 
editable region, first select a container, such as the side- 
bar Div in this page. To select the sidebar Div, I placed 
my cursor in the sidebar and then clicked the sidebar 
tag in the tag selector at the bottom of the page. 




Any area that's not an Editable region can only be edited in the template itself, and any edits you make to a 
part of the page that isn't designated as Editable will automatically be updated on all the pages created from 
the page. 
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5. With a container selected, such as the sidebar, 
choose InsertOTemplate ObjectsOEditable 
Region. In the New Editable Region dialog box, 
give the region a name (remember no spaces or 
special characters) and then click OK. If you 
don't have visual aids turned off, Dreamweaver 
will distinguish the editable region by surround- 
ing it with a blue line and including a small tab at 
the top with the name you gave the region. 



6. Repeat Steps 4 and 5 selecting different contain- 
ers in turn. For example, you could select the 
Div with the ID of mainContent, just like you 
selected the sidebar, and make it an editable 
region as well. It's common practice to leave fea- 
tures that you want on all your pages, such as 
banners, logos, or navigational elements, as 
non-editable regions because you don't want 
these areas to change on the individual pages 
you create from the template; they are areas 
where you'll likely want to make global updates 
later. 
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After you define all editable regions, choose FileOSave to 
save the template. When you're ready to create a new 
page from the template, choose FileONew, just as you 
would do to create any new page in Dreamweaver. 




If you created your template using a page that includes text and images for a page in your site, you can use the 
template to create that page. After you're done, however, you might want to open the template again and 
replace the actual page content with holder text and placeholder images because it's less confusing. To create a 
placeholder image, choose lnserK>lmage ObjectsOlmage Placeholder and in the Placeholder image dialog box, 
enter a name, height, and width. You can enter any height and width for a placeholder, Dreamweaver automati- 
cally adjusts these settings to the true size of any image you use to replace the placeholder later. 



Part II: Putting the Pages Together 




New Document 



^ Blar*. Page 



a. 



told War Museum 
Copy I 

:ar*. 



Page hom Swrote 
^* Oihcf 



1 1 i 

A, 
A, 
A, 

sL 
A, 
it 

/» 
< 



Egpjti 

FaluwOrer 

r«m!y St» TenipWe 

I eMllrds 

<*Ay Wflivet 
Kvrl Nwk Irv 
JW(5 tost lnfca It) 
X Warner 
MyfchTarnolate 
JHryhjh Template - ck 
MMUnliei WefcSAt 
>j fit* i. TaJri*. Agei 

> 




Muln Content 



W< ■111 w vu *«•«< 



SSTn^Ty ^Smnm^^i turn 



DC! 

H Update page when template change* 



•>i »».«•: .'.'itei<. 



CrrAtr 



] C 



& It's always good practice to save a new page before you 
start editing it by choosing FileOSave, just as you would 
save any other new file in Dreamweaver. You can then 
edit any of the editable regions in a page created from a 
template. Remember, however, that you can't alter any 
of the areas that aren't editable. In this example, I'm 
inserting an image into the sidebar by first deleting the 
placeholder text and then using the Insert Image icon at 
the top of the workspace. 
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8. 



In the New Document dialog box, 
choose Page From Template from 
the left-hand column, choose the 
site you're working on from the Site 
column, and then choose the tem- 
plate you want from the right 
column. Notice that Dreamweaver 
includes a preview of the template 
in the right side of the dialog box. 
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70. You can add text to a Dreamweaver layout by 
typing it into any editable region of the page, 
and you can use the copy-and-paste technique 
to bring text in from another program, such as 
Microsoft Word. (See the nearby sidebar, 
"Inserting text from another program," for 
more details on your copy-and-paste options in 
Dreamweaver.) When you finish adding content 
to the page, save it, and you're ready to create 
a new page with the template by again choos- 
ing FileONew and repeating Step 8. 
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1 1. Again, you can add text and images to any of 
the editable regions just as you would add to 
any page in Dreamweaver, by using 
InsertOlmage and typing to enter text or using 
copy-and-paste. If you want to align a Div tag or 
another element to the left or right side of a 
page, you can use the float-right and float-left 
styles that are included in all Dreamweaver CSS 
layouts. Don't be confused by their abbrevia- 
tions in the style sheet: Fit If t is the float left 
style, and Fltrt is Float right. To apply align- 
ment styles, select an image or another element 
and choose the style you want from the Class 
drop-down list in the Property inspector. When 
you float an image to the right or left, as you see 
here, any text or other elements wrap around 
the image. Save the page when you're done. 




/ 2. At any time, you can go back to the template to make changes to any 
of the editable regions, and those changes will automatically be 
applied to any pages created from the template. So, for example, you 
could now create a list of links in the footer at the bottom of this page 
and Dreamweaver will automatically add those links to all the pages 
created from the template when you save the file. Notice in this figure 
that the navigation links in the footer of this page aren't in an editable 
region. You find instructions for creating links in Dreamweaver in the 
section "Setting Links in Dreamweaver," later in this chapter. 
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73- To save your changes and update any pages cre- 
ated from the template at the same time, choose 
FileOSave and in the Update Template Files 
dialog box, click Update. Dreamweaver lists all 
pages created from the template in this dialog 
box so that you can see exactly which pages will 
be changed. If you don't want to apply the 
changes to your pages, choose Don't Update. 
All new pages created from the template will 
include the changes you made. 



Although the Dreamweaver layouts are designed to display CSS and other formatting options according to con- 
temporary standards, not all Web browsers support CSS the same way, so it's always wise to test your designs in 
a variety of Web browsers before you publish them. And here's a tip: Internet Explorer does not display Dynamic 
Web Templates, but Firefox does. Thus, if you're working on a template and want to preview your work as you go 
along, choose FileOPreview in Browser and choose Firefox from the list of browsers. If you haven't associated 
Firefox with Dreamweaver, choose Edit Brower List from the Preview in Browser list, and then click the plus (+) 
sign next to Browsers to select and add to the list any browser on your hard drive. You can download a free copy 
of Firefox from www. firefox. com. (You find more detailed instructions in Chapter 9 for previewing your 
pages in multiple Web browsers and for adding new browsers to the preview list in Dreamweaver.) 



Inserting text from another program 



Dreamweaver gives you many options for 
maintaining formatting when you copy and 
paste text from another program. You can 
change the default method for the way 
Dreamweaver handles formatting when you 
choose EditOPaste and alter the preferences 
in the Copy/Paste category. And, you can 
choose EditoPaste Special to make all 
options available each time you paste new 
content. Here are your six options: 

Text only: Dreamweaver strips any for- 
matting and inserts plain text. 

w Text with structure: Dreamweaver 
includes paragraphs, lists, tables, and 
other structural-formatting options. 

Text with structure plus basic format- 
ting: Dreamweaver includes structural 



formatting as well as basic formatting, 
such as bold and italic. 

Text with structure plus full formatting: 

In addition to the previous options, 
Dreamweaver includes formatting cre- 
ated by style sheets in programs such as 
Microsoft Word. 

Retain line breaks: Selecting this check 
box ensures that line breaks are pre- 
served, even if you don't keep other for- 
matting options. 

Clean up Word paragraph spacing: This 
option is designed to address a common 
problem in the way Microsoft Word para- 
graph spacing is converted when con- 
tent is pasted into an HTML file. 
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Setting Links in DreamWeaver 




is 



Toolbox: 

Adobe Dreamweaver CS3 

A Web site with a root 
folder defined in 
Dreamweaver 
A GIF or JPEG image 
(you find sample images 
on this book's companion 
Web site at www. 
DigitalFamily . 
com/diy) 

Time needed: 

Less than an hour 




Dreamweaver is truly a dream when it comes to setting links. The most 
important thing to keep in mind is that a link is essentially an address 
(a URL) that tells a visitor's browser which page to open when the visitor 
clicks the text or image containing the link. 

If the page you want to link to is within your Web site, you can create a 
relative link, which includes a path describing how to get from the current 
page to the linked page. A relative link doesn't need to include the domain 
name of the site — just the instructions for a browser to move from one 
page within your site to another. (If you want to link to a page outside your 
site, see the next section, "Linking to Another Web Site.") 

When you link from one page to another page in your Web site, the most 
important thing to remember is to save your pages in your site's root folder 
(as described in "Defining a Web Site in Dreamweaver," earlier in this chap- 
ter) before you start setting links. Here's how to create a link from one page 
to another within a Web site: 
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7. In Dreamweaver, open the page where 
you want to create a link. Select the 
text or image that you want to serve 
as the link (the text or image that a 
user clicks to trigger the link). Click 
and drag to highlight text, or click 
once to select an image. In this exam- 
ple, I selected the text Chocolate 
Contest, and I want to link it to a 
page named winners .html located 
in a folder named Contest. Note that 
all these files and folders are located 
inside the same local root folder. 



2. Click the Link icon on the Common Insert bar, at 
the top of the workspace. Alternatively, you can 
set a link by using the Link field in the Property 
inspector: Click the Browser button (which 
looks like a yellow file folder). If you choose this 
option, you skip the Hyperlink dialog box shown 
in Step 4 and simply select the page you want to 
link to from the Select File dialog box. 
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Why so many fonts? 



can 



specify any font you want 
Web pages, you don't have 
complete control over how the font appears 
on a visitor's computer. That's because the 
font you apply is displayed properly only if 
visitors have the same font on their hard 
drives. To help ensure that your text appears 
as you intend, Dreamweaver offers collec- 
tions of common fonts, grouped together in 
families. 

The browser displays the formatted text in 
the first font available in the font list. For 
example, if you choose the font collection 
that starts with Georgia and a visitor doesn't 
have Georgia, the text is displayed inTimes 
New Roman (The second font in the list); if 



the visitor's browser doesn't have that font 
either, the text is displayed inTimes; and 
so on. 

You can create your own font collections by 
selecting the Edit Font List option from the 
bottom of the Font field in the Property 
inspector and using the Edit Font List dialog 
box. 

The only way to ensure that text appears in 
the font you want is to display the text as a 
graphic. That's not a bad option for special 
text, such as banners or logos, but it's usu- 
ally not a good option for all your text 
because graphics take longer to download 
than text and are harder to update later. 
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Link: 
Target: 
Title: 
Access key: 
Tab index: 
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OK 



Cancel 



Help 



3. In the Hyperlink dialog box, click the Browse 
icon (which looks like a yellow file folder) to the 
right of the Link field, and in the Select File 
dialog box, navigate on your hard drive to the 
page you want to link your image or text to. 
Click to select the filename of the page, and then 
click OK (in Windows) or Choose (on the Mac). 



4. The link is automatically set, and 
the dialog box closes. If you create 
a link by using text, as I do in this 
example, the text changes to 
reflect the style for a link. By 
default, active links appear under- 
lined and in dark blue. To test your 
links, you have to view your page 
in a browser, a process covered in 
the section "Previewing Your Page 
in a Browser," later in this chapter. 
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Linking to Another Web Site 



Meed to Krtou/ 



Toolbox: 

v Dreamweaver CS3 
A Web site with a root 
folder defined in 
Dreamweaver 
The address of the page 
to which you want to link 

Time needed: 

Less than an hour 




Linking to a page on another Web site — called an external link — is even 
easier than linking to an internal link. All you need is the URL of the page to 
which you want to link, and you're most of the way there. 

To create an external link, follow these steps: 



7. In Dreamweaver, open the page from which 
you want to link and click to select an image, 
or click and drag to highlight the text that 
you want to act as a link. In this example, 
I selected the text Visit DigitalFamily . 
com, at the bottom of the page. 
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In the Link text box in the Property inspector, 
type the URL of the page you want your text 
or image to link to, and then press Enter 
(in Windows) or Return (on the Mac). You 
can also copy and paste a URL from the 
address bar in a Web browser, which is an 
excellent way to ensure that you don't enter 
the address incorrectly. 
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3- The link is set automatically, and the text 
changes to indicate that it's an active link. To 
test a link to another Web site, you must view 
your page in a browser and be connected to the 
Internet. For instructions, see "Previewing Your 
Page in Multiple Browsers," in Chapter 9. 



Although you don't have to type http : / / or even www . at the beginning of a Web site address to get to a 
site in most browsers, you must always use the full URL, including the http : / / part, when you create an 
external link in HTML. Otherwise, the browser can't find the correct external site address, and the visitor will 
probably end up on an error page. 



Adding paragraphs and tine breaks 



When you create page designs for the Web, 
you must work within many limitations that 
might be confusing at first, even if they 
serve a purpose. How you create paragraph 
and line breaks is a good example. 

If you're working in Design view in 
Dreamweaver and press the Enter key (in 
Windows) or the Return key (on the Mac), 
Dreamweaver inserts a <p> (Paragraph) tag 
in the code, which creates a line break fol- 
lowed by a blank line. If you want a line 
break without the extra blank line, hold 
down the Shift key and press Enter or 
Return; Dreamweaver inserts the <br /> 
tag into the code, to create a single line 
break. 

If you want to add a lot of space, you can 
press Enter or Return multiple times, and 



Dreamweaver inserts <p>  </p>. 
These Open and Close paragraph tags have 
a nonbreaking space in the middle. 

You can also add space to a page by using 
margins or padding settings in CSS styles. 
You find instructions for working with these 
style options in the section "Creating New 
Pages in Dreamweaver," earlier in this 
chapter. 

Note that you can add as much space as you 
like to HTML code without changing the 
page design. If you're working in Code view 
in Dreamweaver, you can add space within 
the code by pressing the Enter or Return 
keys, without affecting the way the page 
appears in a Web browser. 
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Setting a Link to an E-Mait Address 



Stuff M 
Need to Knout 



Toolbox: 

v Dreamweaver CS3 
A Web site with a root 
folder defined in 
Dreamweaver 
An e-mail address 



Time needed: 

Less than an hour 




Another common link option directs site visitors to an e-mail address. 
Visitors can send you messages easily with e-mail links. I always recom- 
mend that you invite visitors to contact you because they can point out 
mistakes in your site and give you valuable feedback about how you can 
further develop your site. Adding contact information also lends credibility 
to a Web site because it shows that you're accessible and open to being 
contacted. 

Setting a link to an e-mail address is just as easy as setting a link to another 
Web page. All you need to know is the e-mail address you want to link to 
and which text or image you want to use when you set the link. 



To create an e-mail link, select the text that you 
want to link. 
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2. With the text or image selected, click the Email 
Link icon on the Common Insert bar. 
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3- In the Email Link dialog box, enter the e-mail 
address in the Link field and click OK. The 
dialog box closes and the text automatically 
changes to the style for an active link. 
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4- Note: The Email Link dialog box works only with text. If you want to use an 
image as an e-mail link, you must select the image and then enter the e-mail 
address, preceded by mail to : in the Link field in the Property inspector. In this 
example, the image is selected, and the e-mail link has been created by entering 

mail to : claire@digital family . com. 




When visitors to your Web site click an e-mail link, the visitor's computer system automatically launches the 
default e-mail program and creates a blank e-mail message to the specified e-mail address. This is a cool trick, 
but it can be disconcerting to users who don't expect it to happen, and it doesn't work if they don't have an 
e-mail program on their computer. That's why I always try to let users know when I use an e-mail link. For exam- 
ple, rather than just link the words Contact Janine, I link the words Email Janine. Even better, I often link the 
actual e-mail address. 




When you create an e-mail link on a Web page to be displayed on the public Internet, you open yourself to 
spammers, some of whom use automated programs to "lift" e-mail addresses off Web pages. That's why many 
sites don't include e-mail links, but instead use text such as "Send e-mail to Janine at jcwarner dot-com." You 
can also use a form to get around this potential problem. By setting up a form with a script that delivers the 
form's contents to an e-mail address, you can shield your e-mail address from spammers while still making it 
easy for visitors to your site to send comments. A relatively new alternative is offered by the Web site 
AddressMunger.com, which you can use to create a special script that shields your e-mail address from spam- 
mers. You can find more information in Chapter 1 4 about AddressMunger.com and other services that you can 
use to enhance your Web site. 
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Chanqinq Page-Wide Settings 

Properties 




stuff you 

Need to Knout 



Toolbox: 

Dreamweaver CS3 
A Web site with a root 
folder defined in 
Dreamweaver 

Time needed: 

Less than an hour 




You can change many individual elements on a page in the Property inspec- 
tor, but if you want to make changes that affect the entire page, such as 
changing the background color of the entire page or changing the way links 
and text are formatted, you can use the Page Properties dialog box. 

Although you can apply global settings, such as text size and color, in the 
Page Properties dialog box, you can override those settings with other for- 
matting options in specific instances. For example, you can set all text to 
the Helvetica font in the page properties and then change the font for an 
individual headline to Verdana by using the Font field in the Property 
inspector. 

To change the font settings, background and text colors, and link colors for 
an entire page, follow these steps: 



/. Choose ModifyOPage Properties or click the 
Page Properties button in the Property inspec- 
tor to open the Page Properties dialog box. 
Select the Appearance category, click the Page 
Font drop-down list, and choose the font collec- 
tion you want to serve as the main font for the 
text on your page. (See the earlier sidebar "Why 
so many fonts?" to find out more about font 
collections.) 
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Bottom margin: 





2. In the Size drop-down list, specify the font size 
you want for the text on your page. (In this 
example, I selected Medium.) Click the Text 
Color swatch box to reveal the color palette. 
Choose any color you want for the text color on 
the page. The color you select fills the color 
swatch box but doesn't change the text color 
on the page until you click Apply or OK. 
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DropBf 



3- Click the Background Color swatch box and 
choose a color if you want to fill the back- 
ground of the page with a solid color. To 
inserta graphic into the background of your 
WtCBrowse button next to the 
ouircftmage box, and in the Select 
Image Source dialog box, select an image. 
A background image automatically repeats 
(or tiles) across and down the page unless 
you choose no-repeat. 
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4- Use the margin options at the bottom of the 
dialog box to change the left, right, top, or 
bottom margins of your page. Entering 0 in all 
four of these fields creates designs whose edges 
begin flush with the edge of a browser. 



5. To alter the display of links on a page, first select the Links category from 
the left side of the Page Properties dialog box. Specify the font face and 
size you want for the links on your page. If you don't specify a font, links 
appear in the same font and size that are specified for the text in your 
document. 
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6. Specify a color for any link option (or all link 
options) by clicking the color well and selecting 
a color for each of the link states separately. The 
color you select is applied to links on your page 
based on the link state. All four link states can 
be displayed in the same or different colors: 

• Link Color: The color in which a link 
appears when it's first displayed on a 
page 

• Visited Links: The color of links that a 
visitor has already clicked, or visited 

• Rollover Links: The link color when a 
user rolls the cursor over the link 
(also known as hovering) 

• Active Links: The link color when a 
user is actively clicking it 
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Rollover links: 



#FF9900 



Active links: \~ w 



#FFCC66 



Always underline 



Never u 




Show underline only on rollover 
Hide underline on rollover 



7. In the Underline Style drop-down list, specify 
whether you want links underlined. By default, all 
links on a Web page appear underlined in a 
browser, but many designers find the underline dis- 
tracting and prefer to turn it off by selecting Never 
Underline. You can also choose Show Underline 
Only on Rollover to make the underline appear 
when a user moves a cursor over a link. Hide 
Underline on Rollover causes the underline to dis- 
appear when a user moves a cursor over a link. 



5. As you alter the different settings, 
you can click the Apply button to 
see how the changes appear on 
your page. After you specify all the 
settings, click OK to finish and 
close the Page Properties dialog 
box. 
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Although you can set the link styles to better suit the design of your site, it's good practice to use the same link 
styles throughout your site, to save your visitors the confusion of having to identify multiple styles as links. 



When you change the background, text, or link colors, make sure that the colors look good together and that 
your text is still readable. As a general rule, light text is best displayed on a dark background, and dark text is 
best displayed on a light background. 
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Adding Meta Tags for Search Engines 



Need to Know 



Toolbox: 

Dreamweaver CS3 
A Web site with a root 
folder defined in 
Dreamweaver 



Time needed: 

Less than an hour 




Some search engines read Meta tags for keywords and descriptions. 
The first enables site designers to specify a list of keywords that match 
the content on their Web sites when someone types the same keywords 
into a search engine. Unfortunately, Meta keywords have been so 
abused by Web designers attempting to mislead visitors about the true 
content of their Web pages that most search engines ignore the Meta 
keyword tag. Some search engines continue to recognize Meta key- 
words, however, and it shouldn't hurt your ranking with search engines 
if you use this type of Meta tag. 

The Meta description tag is designed to let you include a written 
description of your Web site, and it often serves as the brief description 
that appears in search results pages, so it's definitely worth including in 
your pages. 

Follow these steps to fill in the Meta description tag: 



7. Open the page where you want to add a 
Meta description. You can use Meta descrip- 
tions on any page, or all pages, on your Web 
site. Choose InsertOHTMLOHead TagsO 
Description. In the Description text box, enter 
the text you want for your page description. 
(Don't add any HTML code in this box.) 
When you click OK, the Meta description is 
automatically added to the HTML code 
behind the page. 



Description 



Description: 
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The Chocolate Game is a Pun and exciting 
game played with flat chocolates and no 
hands. Good For 2 or more players ages 4 and 



OK 



Cancel 



Help 
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hocolate 



2. To view or edit the Meta description after you 
create it, choose either the Split or Code view 
option, by clicking the corresponding button 
at the top of the workspace. In this example, 

1 selected Split so that both Code view and 
Design view are visible. To edit the Meta 
description, locate it in the HTML code, and 
then you can delete, change, or add text as you 
would do in Design view. The description text 
you enter is inserted into the Head area at the 
top of the page in the HTML code. Meta content 
doesn't appear in the body of the page. 

If you want to add keywords, repeat Steps 1 and 

2 and choose InsertOHTMLOHead TagsO 
Keywords in Step 1 . 
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Introduce yourself to the world with a profile or portfolio site. A 
Web site about yourself is a powerful tool that can help you land 
your dream job, attract high-profile clients, or even reconnect with 
long-lost friends and family 

Perhaps the biggest challenge to creating a profile or portfolio site 
is determining the best way to summarize your life experience, tal- 
ents, and body of work: 

\^ If you're an artist, you can photograph your paintings or 
sculptures to create a visual portfolio of your work to dis- 
play online. 

1^ If you're a consultant, you can develop a collection of case 
studies describing your success with previous clients or 
featuring your best designs. 

^ If you're a writer, you can include a collection of published 
articles or showcase writing that hasn't been published 
anywhere else — after all, a Web site enables you to 
become your own publisher. 

No matter what you do, you probably want to create a biography about yourself. 
Whether your bio is serious or silly, trying to sum up your own life in a few paragraphs 
is likely to be one of the most challenging things you will ever write (which is why I 
include a few tips for writing a great biography in the sidebar "Telling your own tale"). 

In this chapter, you also discover the basics of bringing your ideas to life on the Web. 
Working in Dreamweaver, you can start with the templates that come with this book 
and find out how to transform the templates into your own creations. 



Starting vOith Profile or Portfolio Templates 

The instructions in this chapter are designed to be used with the templates and 
images provided on the Web site for this book (www. DigitalFamily . com/diy). 
You can choose a profile template or a portfolio template, depending on the type of 
site you want to create. To download a template, just check the Web site for the 
chapter number and template name listed in the Toolbox and then follow the simple 
instructions on the site to download the files. The step-by-step instructions in this 
chapter explain how to personalize the templates; add and edit images; and change 
colors, fonts, and other style options. 
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If you're new to working with Dreamweaver, you might want to read Chapter 5 to 
become familiar with the basics of working with Dreamweaver before you dive into 
creating a site with a template. 

DrOpBO^kj^^.^ the profile template 

If you want to showcase your personal or professional experience, the profile tem- 
plate is designed to make it easy to create a simple Web site that features your work 
or hobbies. The first task in this chapter is the simplest of the template designs in 
this book. It features one page that's designed to showcase a biography, testimoni- 
als, and samples of your work or interests. 

As you work through the steps in the first task, remember that you can alter the tem- 
plate a little (by simply adding your own text and images) or alter the design a lot by 
changing the colors, font options, and other style settings, to make the design more 
your own. 

If you want to create a profile site with multiple pages, you can save copies of the 
page design and create links to as many pages as you need. If you know that you 
want to create a site with multiple sections, you may want to use the portfolio site 
template featured in the second half of this chapter because it includes multiple 
page designs that are already linked. (See the next section for an introduction to the 
portfolio template.) 

Figure 6-1 shows an example of a design created using the profile template featured 
later, in the section "Designing a Winning Online Profile." The profile template fea- 
tures a banner graphic created in Photoshop Elements. You find instructions for 
editing the banner graphic in the section "Customizing the Portfolio Banner 
Graphic." 
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Figure 6-1 : You can create a profile site, like the one shown in this figure, 
by editing the profile template featured in this chapter. 
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Creating a multipaqe portfolio site 



If you're ar 

DropBocfe 

shown in F 



If you're an artist, a photographer, a graphic designer, or another creative profes- 

portfolio site is for you! This template is designed to showcase a portfolio 
age gallery, and thus includes five main pages: one for the front page, 
Figure 6-2; a second for an about page, which can also be used for a biogra- 
phy; and finally, one (three total) for each of the three galleries. The links among the 
main pages have already been created in the template files, making it easy to 
develop your own multipage site, like the one shown in Figure 6-2. 
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Figure 6-2: The Portfolio template is designed to showcase three galleries of images, 
such as the nature photography shown here. 



If you're a photographer with hundreds or thousands of photos that you want to 
share online, you might be better served by one of the many photo-sharing sites on 
the Web, such as Flickr.com, or a professional photography site like Creative Photo 
Solutions at www . i f p3 . com. You find a list of photo sites in the nearby sidebar 
"Many ways to share your photos." 

Because the portfolio site is more complex than the profile site featured in the first 
part of this chapter, you find three separate tasks designed to help you fully cus- 
tomize this site: 

The first task, in the section "Customizing the Portfolio Banner Graphic," 
shows you how to edit the banner graphic, the image that appears at the top 
of this page design, using Photoshop Elements. You can edit the graphics 
included with the template files in any image editor that supports Layers, 
including Adobe Photoshop CS3 or Photoshop Elements. (Note: If you 
prefer to use text for the banner, you can simply delete the placeholder 
graphic at the top of the page and enter text in its place.) 

The second task, in the section "Customizing the Portfolio Home Page," 
shows you how to use Dreamweaver to replace the text and images in these 
templates and how to make basic color and style changes. 
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Many Mays to share your photos 



my excellent photo-sharing 
Internet including the ones 
highlighted in this list: 

IFP3 Creative Photo Solutions: If you're a 
professional photographer and want to 
create a Web site where you can sell photos 
online, consider a site like www. ifp3 . com, 
designed to make it easy to upload and dis- 
play photos as well as manage online sales. 

Flickr: Flickr (www. f lickr . com) is one of the 
most sophisticated online photo sites, offer- 
ing a wide range of services, including the 
ability to manage lots and lots of pictures in 
multiple personal albums. You also get more 
advanced options for adding captions and 
other text to your online album. 

If you blog, you might appreciate the Flickr 
features that make it easy to add photos to 
a blog or online journal. You can even search 
through photos from other Flickr users and 
add their photos to your albums. (Sharing is 
optionahYou can keep your albums private 
or make any or all of your images viewable 
by anyone who uses the site.) 

Photobucket: You can not only manage large 
numbers of photos at Photobucket 
(www.photobucket.com) but also upload 
and share video. One feature that makes 
this site extremely popular is the ease with 
which you can add photos and videos that 
are hosted at Photobucket to your blog or 
your profile on sites like MySpace and 
Facebook. 

Kodak EasyShare Gallery: The Kodak 

Gallery site (www.kodakgallery.com) is 
easy to use. You can upload photos you take 
using any digital camera, phone, or film; 
share your photos with friends, family, or 



whomever; and print your favorite pictures 
and shop for photo keepsakes and gifts, 
such as magnets, mugs, and coasters. Folks 
who look at your photos can sign a guest- 
book so that you know they've been there. 

.Mac: If you use an Apple Macintosh com- 
puter, you won't find an easier way to share 
photos than iPhoto and .Mac (www. apple . 
com/dotmac/).With iPhoto6, you can create 
photocasts to share any photo album with 
friends and family. When you use this free 
service, your photos are automatically 
uploaded to .Mac, and your friends and 
family receive an e-mail message with a 
special link. When they click the link, they 
automatically receive your photocast. Best 
of all, when you update your photos, 
your friends and family receive updates 
automatically. 

Shutterfly.com: Similar to Kodak Easy 
Share Gallery, Shutterfly (www. shutter 
fly.com) makes it easy to post and share 
photos for free, offers simple photo-editing 
tools, and sells printing services you can 
use to create a variety of gift items and 
prints, including poster-size enlargements. 
Shutterfly has an intuitive interface, and you 
can use its specialized printing options to 
turn your pictures into greeting cards, 
bound photo albums, personalized calen- 
dars, coffee mugs, T-shirts, and tote bags 
that you can send directly to your friends 
and family. 

Snapfish: Snapfish (www.snapfish.com) 
offers the same types of services as the 
others, including editing tools, photo gifts 
(such as photo mugs and T-shirts), and 
online photo sharing. 



The third task, in the section "Creating New Pages from a Dynamic Web 
Template," covers how to create new pages from Dynamic Web Templates in 
Dreamweaver, how to set links to new pages, and how to use these tem- 
plates to make global changes across the pages you create. 
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To help you get started and to make it easy for you to build a complete site quickly, 
I created two template pages for your portfolio site — one for the gallery pages and 
another for the front page design. You can use these templates to generate as many 
pages as you like for the site. Because these templates use Dreamweaver's Dynamic 
late features, however, you will find some restrictions on what can be 
pages generated from the templates, because some areas of the templates 
are locked, a feature that makes it possible to make global changes across all pages 
created from a template. You find detailed instructions on how to work with tem- 
plates and locked regions in the tasks that follow. 




To help you get started with this site and to ensure that the links on the navigation 
bars work properly, I created pages for each of the main sections from the templates. 
You can use any or all of these pages to create your own site, and you can easily add 
pages from the templates. These are the pages you find in the site: 



\^ index . html is the front page. 

)^ about . html is for your biography or other general information. 

\^ galleryl . html is for the first page of the first gallery. 

\^ gallery2 . html is for the first page of the second gallery. 

\^ gallery 3 . html is for the first page of the third gallery. 



Naming your files so that they correspond to their contents, as I have here, makes it 
easier to identify the pages later when you want to edit them. 
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Designing a Winning Online Profile 




To create a profile site, download the profile template from the 
DigitalFamily . com/diy Web site (see the Introduction for details) 
and follow these steps. 



Toolbox: 

Adobe Dreamweaver 
The Profile Template 
(from Digital 
Family . com/diy) 
Your own text and 
images, to personalize 
the template 

Time needed: 

About half a day 
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In Dreamweaver, choose SiteONew Site. In 
the Site Definition dialog box, click the 
Advanced tab. In the Site Name text box, 
type a name for your site. In this example, 
I entered My Profile Site. 
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2. Click the Browse icon next to the Local Root 
Folder text box and locate the folder on your 
hard drive that contains the profile template 
files you downloaded from DigitalFamily. 
com/diy. (Note: You can rename the folder, if 
you like.) Then click the Browse icon next to the 
Default Images Folder field and select the 
Images folder in the profile template site. Leave 
the rest of the options in this dialog box alone 
for now, and click OK to close the Site Definition 
dialog box and save your settings. If you haven't 
selected the Enable Cache check box, a message 
box appears, asking whether you want to create 
a cache for the site. Click Yes to speed up some 
of the Dreamweaver display features. 
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Jetting your own tate 



Drop Books 



own biography may seem like 
. After all, you're arguably the 
best expert in the world on the topic of you. 
But if you sit down to write your own story 
and find that the words don't come easily, 
rest assured that you're not alone. Summing 
up your life in a few words or paragraphs 
can make the most-experienced writers 
want to procrastinate with a run to the fridge 
for a little snack or the inexplicable impulse 
to organize a desk or closet. 

To help you get started, here are a few sug- 
gestions for writing your own biography. 

Brainstorm a list of all accomplishments 
or key points you want to include with- 
out worrying about writing them well or 
putting them in order. Then check each 
one off the list as you work it into your 
written biography. 

v 0 Ask friends or colleagues how they 
describe you and what they consider 
your best skills, and then use their ideas 
in your biography. This strategy is also a 
good way to get testimonials for your 
Web site. 

\S Decide whether you want to create a 
professional biography or a personal 
one. Then set the tone based on that 
decision. Consider your goals. When vis- 
itors to your Web site read your bio, do 
you want them to take you seriously, or 
do you want them to appreciate your 
creative vision? Do you want to focus on 
achievements or use humor to bring out 
your personality? Chapter 1 discusses in 
more detail how to plan goals for a site. 



Professional biographies are often writ- 
ten in the third person ("she" rather than 
"you" or "I") and in a more-formal style. 
If you're writing a professional biogra- 
phy, imagine that an emcee will use it to 
introduce you before you give a speech 
to an audience of people who have 
never met you. 

is Personal biographies can be much more 
informal, and are more likely to be writ- 
ten in the first person ("I" rather than 
"he" or "you"). In this case, you might 
imagine that you're writing to a new 
pen pal and introducing yourself for the 
first time. 

V Remember that you can combine these 
two approaches, using the first person 
with a more formal style, for example, or 
using the third person with a sprinkle of 
humor and silliness. 

Start your biography with your most- 
important accomplishment, a short list 
of skills or titles, or a brief anecdote that 
captures something important about 
who you are. Your goal is to give readers 
a good sense of who you are or what 
you do even if they read only the first 
sentence or two. 

When you're finished, make sure to have 
someone you trust review your biography 
to make sure it reads well and covers the 
most-important points before you add it to 
your Web site. 
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3- When you complete the site setup 
process, the files and folders in the 
profile template are displayed in 
the Files panel in Dreamweaver, to 
the side of the workspace. Double- 
click on the profile-template . 
html file to open the profile page 
design in Dreamweaver. (For more 
detailed instructions on the site 
set-up process, see Chapter 5.) 



4. Choose FileOSave As and name the page 

index . html. (See the sidebar "Creating new 
pages in a profile site" for details on why the 
main file of a site should be named index.) 
Then change the page title by replacing the text 
in the Title field, at the top of the Dreamweaver 
workspace, with your name and a brief title or 
description to identify your profile page. (Note: 
The page title isn't displayed in the body of the 
page; this is the text that appears on the title 
bar at the top of the browser window.) 
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Your name here is a fabulous bla, 
bla bla bla, bla bla. . . . bla, bla 



5. At the top of the page, click and drag to select 
the text Your name here and replace it by 
typing your own name or any other text you 
want to appear at the top of the page. In this 
example, I changed the text to David 
LaFontaine. 
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6. To insert the photo or other image you want to 
use in this design, click to select the image 
placeholder (the gray box) in the left column 
and then click the Browse button (the yellow 
folder icon) in the Src field in the Property 
inspector. 



7. In the Select Image Source dialog box, navigate 
your hard drive to find the image you want to 
insert and then double-click the image filename 
to select it. If the photo or other image you 
select in Step 6 isn't already located in the local 
root folder of your site, Dreamweaver offers to 
copy the file into the root folder. (You find more 
detailed instructions for adding images in 
Chapter 5.) 
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5. Click and drag to select the text next to the image in the 
left column and then type to replace it with your biogra- 
phy or any other text you want to appear on the front of 
your profile site. Note that you can also use copy and 
paste to replace this text with text from another file, 
such as a word-processing document. 
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20 years experience as a journalist, 
e JitQjr, ajMLmultimedia producer 

irwn^^a variety of projects in 
film, television, print, radio, and the 
Internet. 



He is a consultant for Innovation, 
an international multimedia consulting group, and a freelance 
writer who specializes in media and technology for several 
blogs, including LA Voice and Hard News Inc. He has also 
produced several case studies for the Newspaper 
Association of America (NAA.org) and the Online 
Journalism Review (OIR.org). 
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10. Continue replacing text and other elements on 
the page, such as the work samples section. To 
replace the text in a headline, click and drag to 
select the headline and then type to replace the 
text. Note that although this design includes 
formatted text areas for testimonials and work 
samples, you can easily delete any elements 
you don't want to use or add sections as 
necessary. 



9. Use the formatting icons in the Property inspec- 
tor, at the bottom of the work area, to add bold, 
italic, and other formatting options. To remove 
bold formatting, simply highlight the bold text 
and click on Bold button. (Dreamweaver auto- 
matically creates CSS styles when you use these 
features.) You find more details on formatting 
text and working with styles in Chapter 5. 
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/ /. To add images, such as a banner graphic for the 
top of the page, click to place the cursor where 
you want to insert the image, and choose 
InsertOlmage. In the Insert Image dialog box, 
navigate your hard drive to find the image you 
want to insert. Here's an advanced tip: If you 
add a graphic in place of the name at the top of 
the page, as shown here, you may need to 
delete the HI formatting to make room for the 
image. To remove a heading tag, such as HI, 
click to select the image or text that's being 
affected by the tag and then choose None from 
the Format drop-down list in the upper-left 
corner of the Property inspector. 
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Droplta 



Creating new) pages in a profile site 




ige of any Web site should be 
he. html. (If you use a Windows 
server, you may need to change the name 
to default .html. )The rest of the pages can 
be named anything you like, as long as you 
don't use spaces or special characters 
(hyphens (-) and underscores (_) are okay), 
and you include the . html extension at the 
end of every page. (Dreamweaver adds the 



extension for you automatically when you 
create and save pages in Dreamweaver.) 

You can create new or additional pages for 
your site from the profile template featured 
in this chapter by simply choosing FileO 
Save As and giving the file a new name. 
(Just be sure that you don't delete the 
extension.) 



/ 2. To change the red stripe down the 
right side of this design, you can 
remove the background image or 
replace the image with one that 
uses a different color. Because this 
image is inserted using a style, first 
open the CSS panel by choosing 
WindowOCSS, and then click the 
All tab at the top of the panel to 
display the list of styles. Double- 
click to select the style named 
# container. Select the Background 
Category on the left side of the CSS 
Rule Definition dialog box, and then 
select and delete all text in the 
Background Image field to delete it; 
or, use the Browse button to locate 
another image to replace it with a 
new image. Click OK to close the 
dialog box and automatically apply 
any changes to the background. 
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Customizing the Portfolio Banner Graphic 



Sx 
Nee, 




Toolbox: 

Photoshop Elements 
The banner graphic from 
the portfolio template 
(portfolio . zip 
from Digital 
Family . com/diy) 
Your own text and 
images, to personalize 
the template banner 



Time needed: 

About an hour 




You can edit the banner graphic at the top of this portfolio template to 
better match the design you want for your Web site. You can edit the 
graphic in any image editor that supports Layers, including Adobe 
Photoshop CS3 and Photoshop Elements, which is used in this task. The 
process is almost exactly the same with either program. This graphic, and 
others featured in the templates in this book, are designed with Layers to 
make it easy for you to customize the images, as you see in this task: 



7. 



Launch a graphics program, such as Photoshop 
Elements (shown here), choose FileOOpen, and 
open the portfolio-banner . tif template 
image file. (You find this file in the images 
folder inside the portfolio template folder that 
you download from the DigitalFamily.com/ 
diy Web site.) 
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2. Open the Layers palette by choos- 
ing WindowOLayers. The Layers 
palette displays the three layers in 
this image: one for the background, 
one for the text Portfolio Name, 
and one for the text By Your 
Name Here. Note: Each element in 
these images is on a separate layer 
to make it possible to edit the ele- 
ments separately. For example, you 
can change the color of the words 
Portfolio Name without chang- 
ing the color of the other text or 
affecting the background color. 
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3. To edit the text in any image in Photoshop Elements, first select the Type 
tool in the Toolbox. 



4- With the Type tool active, click and 
drag to select a section of text and 
then type to replace the words. 
Adjust the Type tool settings on the 
Options bar at the top of the work 
area to change the color, font face, 
size, or other options. In this figure, 
I'm adjusting the font size for the 
selected text, which I changed to 
read Nature Photographs. 
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5. To reposition the text on the banner, click to 
select the Move tool from the Toolbox. (In 
Photoshop Elements, the Move tool is repre- 
sented by the double-headed crossed-arrow 
icon at the top of the Toolbox.) Then click and 
drag a section of text to adjust it. Note that if 
you click and drag a corner, you change the size 
of the text; if you click in the middle of a text 
area and drag, you move the text. 



6. To change the background of a layered image like this 
one, first click to select the Move tool from the toolbox, 
and then click in the Layers palette on the right side of 
the screen to select the background layer. 
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5. Choose SelectOAll to select the image, and 
then choose EditOCopy to copy it. Then click 
anywhere on the banner image to make it the 
active image in the workspace, and choose 
EditOPaste to insert the photo. The image 
appears on a new layer. Select the Layer and 
click and drag to adjust the photograph's place- 
ment on the banner. 



7. To add a photograph as a background layer, you 
must first open the photograph (while the 
banner image is still open) by choosing 
FileOOpen and selecting the image from your 
hard drive. (To help you follow along with these 
steps, you find in the template folder the Zuma 
birds photo shown here. You're welcome to use 
this photo in your site, or you can use an image 
of your own.) 
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9. After you make these changes to the banner 
image, it's time to save it. Here's a trick: You 
save it twice, once with all the layers as a high- 
resolution image and then as an optimized, low- 
resolution image for use on the Web (covered in 
Step 10). To save the layered version, you can 
simply choose FileOSave to replace the tem- 
plate image with your changes, or you can use 
FileOSave As to make a copy. If the TIFF 
Options dialog box opens, you don't need to 
make any changes — just press OK to save the 
file with the current settings. 



Save Far V> u t 



10. To optimize the banner for your 
Web page, choose FileOSave For 
Web. In the Save for Web dialog box, 
choose JPEG from the Optimized 
File Format drop-down list in the 
upper-right corner. The JPEG format 
is best for images that use millions 
of colors, such as photographs. If 
this banner had a solid background, 
the GIF or PNG formats would be 
better options. (You find more 
details on optimizing images for the 
Web in Chapter 4.) 
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/ 7. To reduce the size of a JPEG image, use the slider to 
alter the Quality setting, or enter a number, up to 100. 
Compression is measured as a percentage: the lower 
the number, the higher the compression and the 
smaller the file size. Note that the preview on the right 
represents the optimized version; on the left is a pre- 
view of the original, for comparison. Choose the Hand 
tool from the upper-left corner of the dialog box and 
click and drag to position the most-important elements 
in the image where you can get a better preview. 













Original: "portfiolio-baririer.tif 1 

337K 




JPEG 60 quality 
1E.06K 

6 sec @ 28.3 Kbps 











72. Alter the compression level until the image uses the greatest amount of compression 
(represented by the lowest number in the Quality field), without noticeably degrading 
the appearance of the image. You can see the effect on the file size at the bottom of 
each of the previews. In this example, the Quality setting was reduced to 60 to achieve 
a file size of 15.06K, less than a tenth of the original 337K. 



73- After you have all the settings the way you want them 
for your image, click OK. In the Save dialog box, you can 
give the image a new name or keep the name as it is and 
save it in the images folder. (Yes, it's the same images 
folder that's in the root folder you identified during the 
site-setup process with the portfolio template files.) 
Congrats! You're ready to add your personalized banner 
to your Web pages and start making them your own. 
See the next section for details. 
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After you edit the image that will appear at the top of your page design, 
you're ready to start working on the template, by adding your own text and 
images to make the site your own. Think of this step as the one where you 
get to add in all the content you've collected (see Chapter 1 for details on 
collecting content). 

The portfolio template created for this chapter is made up of several pages, 
including two template files that can be used to generate additional pages. 
The template files are saved in the Templates folder, which is inside the 
main Portfolio Template folder. These template files are special because 
they use the Dreamweaver Dynamic Web Template features, which is why 
they end in . dwt rather than . html, like the other pages in this site. In this 
task, you find instructions for editing the portfolio template files to add the 
banner image to all pages in this site, as well as how to edit the front page 
of the site. To set up your portfolio site in Dreamweaver and edit the home 
page, follow these steps: 



7. 



In Dreamweaver, choose SiteONew Site. In the 
Site Definition dialog box, click the Advanced 
tab. In the Site Name text box, type a name 
for your site. In this example, I entered 

My Photography Site. 
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2. Click the Browse icon next to the Local Root 
Folder text box and locate the folder on your 
hard drive that contains the portfolio template 
files you downloaded from DigitalFamily . 
com/diy. Then click the Browse icon next to 
the Default Images Folder field and select the 
Images folder. Leave the rest of the options in 
this dialog box alone for now, and click OK to 
close the Site Definition dialog box and save 
your settings. (For more detailed instructions 
on the site-setup process, see Chapter 5.) 
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DropBooks 



3- After you complete the site-setup process, the files and 
folders in the template are displayed in the Files panel 
in Dreamweaver, to the side of the workspace. To open 
a folder in the Files panel and display its contents, click 
on the plus (+) sign to the left of the folder. In this 
figure, you can see that two templates and five HTML 
pages are in the Templates folder. To edit the front page 
of this site, double-click on the index . html file in the 
Files panel to open it in the design area. 
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4- With index . html open, change 
the page title by replacing the text 
in the Title field, at the top of the 
Dreamweaver workspace, with a 
brief title or description to identify 
your site. In this example, I changed 
the title to Photographer Janine 
Warner. (Note: The page title isn't 
displayed in the body of the page — 
this is the text that appears at the 
top of the browser window.) 




One of the biggest benefits of using Dynamic Web Templates (as you see in the following steps) is that when you 
make a change to a template file and then save it, that change is automatically applied to all pages in the Web 
site that were created from the template file. You find instructions for how to create and edit templates like 
these in Chapter 5. 
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5. You can replace the three images featured in the 
middle of this page design in a couple of ways. 
The simplest method is to double-click the first 
of the three template images and in the Select 
Image Source dialog box, click to select the 
image you want to use in its place. (If you use 
this method, be sure to then click to select the 
image and in the Property inspector at the 
bottom of the page, change the text in the Alt 
field by deleting the words Nature Photo and 
entering a description of your image.) For the 
best results, insert images that are no more than 
220 pixels wide so that they fit within this 
design. If you want to use larger images, you 
need to change the width settings in the corre- 
sponding styles, as described in Steps 17 and 18, 
later in this task. 



6. Repeat Step 5 until you have replaced all three 
images. If you don't want to use images in all 
three boxes, you can delete any of the image 
placeholders and enter text in its place. Note 
that when an image is selected, the options for 
that image appear in the Property inspector, at 
the bottom of the workspace. 
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7. To add a caption or other text, click and drag 
to select the placeholder text and then type 
to enter your new text. You can add as much 
text as you like to each box, but be aware 
that if you don't use the same amount of text 
in each box, the size of the boxes differ and 
throw off the balance of the design. 
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8. 




If you try to select the banner image at the top 
of the template design, you may be frustrated 
that you can't delete it or replace it in this 
ex . html file. That's because it's in a 
^™lraf%2p template file. You can tell 
erelict aeween locked and unlocked 
regions because when you click on anything in 
a locked region, the cursor changes to a circle 
with a line through it — the universal symbol 
for "You can't do that." Among the many bene- 
fits to having locked regions in Dynamic Web 
Templates is that you can change the contents 
of a locked region, like this banner image, only 
by editing the template file itself, which you do 
in Step 9. 
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9* To change the banner image at the top of the page, first 
open the template file named main . dwt, which is saved 
in the Templates folder. You can open a template file like 
you would open any other page in Dreamweaver, by 
double-clicking on its name in the Files panel or choos- 
ing FileOOpen and selecting the file. 



10. Double-click the banner image and then use the 
Select Image dialog box to select the image you 
want to use in its place. In this case, I replaced 
the placeholder image with the template 
banner that I customized in the previous task. 
(Remember that if you use this technique to 
replace the image, you should click to select 
the image after it's inserted and then enter a text 
description of the image in the Alt field in the 
Property inspector.) 



Etc [dr. firm imcft *)od»y text [ommii i Ste Y«t>oe« Window Udp 
• tmcrt , ,m~n< Ijw«* *ntM tut* S'f I« »«vort»« 

* B Aim b afc4>»n BQ^-^- B-g 



- X 



^c* — m* _£<~J' <«* *»tf ok> w«> ate 




" — nr- — n 
_ , — . 



Nature Photographs 



bom the Artnt Horn* 



(220 x 220) 



(220 i 220) 



.'1*1 . 44| - 



Part II: Putting the Pages Together 



7 7. When you save the template file with the new 




banner, Dreamweaver launches the Update 
Template Files dialog box with a list of all files 
ted with the ooen template. In this case, 

jiJ mael^^S was created from this tem- 
e,^Sc) iPs uie^Sflfy one listed. To apply this 
change to the index page, click the Update 
button. If the template had been used to create 
many pages, this process would update all 
pages created from the template — a useful 
time-saver when you're working with many simi- 
lar files in a Web site. 
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12. When you have multiple Web pages open in 
Dreamweaver, each page is represented by a 
small tab at the top of the workspace. Thus, if 
you want to view the index page to see the 
results of the change you made to the template, 
click on the tab that represents the index page 
and make it the active page in the work area. 
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13. You can make additional changes to this page design, 
such as altering the color of the navigation bar or the 
font face used in the captions, by altering the CSS defi- 
nitions that control the styles on this page. To do so, 
first open the CSS Panel by choosing WindowO 
CSS Styles or clicking on the small arrow next to 
the CSS Panel name on the side of the workspace. 
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To change the color of the dark 
blue navigation bar just below the 
banner, you edit the background 
color in the style named #navbar. 
The simplest way to do that is to 
double-click on the style named 
#navbar in the CSS Panel. In the 
CSS Rule Definition dialog box that 
opens, click on the Background cat- 
egory on the left and then click on 
the color well. You can use the eye- 
dropper to select any color from 
the color palette or click to select 
any color on the screen, such as 
the dark brown color I'm selecting 
by clicking on the dark feathers of 
the duck in the photograph in the 
banner. 




75. Click the Apply button in the CSS 
Rule Definition dialog box to see 
the effects of editing a style. In this 
example, the color of the navigation 
bar changes to dark brown rather 
than dark blue. Click OK to close 
the dialog box. Note that if the style 
is in an external style sheet, like the 
style in this template, Dreamweaver 
automatically opens the style sheet 
in the work area behind the page 
you're editing. (You can see the 
style sheet in the upper-left corner 
of this figure — it's named 
main . ess.) You must save the 
external style sheet before you 
close it, to permanently save your 
style changes. 
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/6« To change the font face or color 
used in the navigation bar, double- 
click #navbar style to open the 
CSS Rule Definition dialog box. In 
the Type category, use the Font 
drop-down list to select a font set. 
Similarly, click in the color well to 
choose a font color. Click Apply 
to see the results of the change 
and then click OK to close the 
dialog box. 
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/ 7- To change the size of the boxes that 
contain the three images and their 
captions, you adjust each box sepa- 
rately, by double-clicking on the 
style name (the boxes are named 
#photol, #photo2, and #photo3) 
and again by using the Box category 
to adjust the width. Be aware, how- 
ever, that if you change the width of 
any or all of the photo boxes, you 
may also need to adjust the overall 
width of the page design by altering 
the #container style. The design 
of this page was carefully created 
so that the total size of each photo 
box, plus the margins and padding 
added to each box, add up to the 
total width of the container. 



18. To change the width of the overall page 
design, you change the width specified in 
the # container style. Double-click on 
#container in the CSS panel, select the Box 
category, and then change the width setting by 
specifying a number of pixels. Note, however, 
that this page was designed to be 780 pixels 
wide so that it displays well in 800 x 600 resolu- 
tion. If you increase the size, anyone with a 
small monitor must scroll from left to right to 
see the entire design. 
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CSS styles provide formatting instructions for different elements on a page. (You find an introduction to working 
with styles in Chapters 3 and 5.) To identify a page element's corresponding style, place your cursor in the area 
of the page you want to change and then use the tag selector, at the bottom of the workspace. For example, if I 
place my cursor in the caption of the middle photo, I can see that the text is formatted using the style named 
. image-caption and that it's contained in the style named #photo2. Click on the tag in the tag selector 
to highlight the corresponding content in the workspace. 



U3rrJ: Lqrets are qreat hunters, an 
IdMll dnu 1 iUd, 





Deer I allow and Axis deer are noi 
ridlivw Lu CdHfurnid 



■ Wolves: Ihe Gray Wolf is one of 

■ l(i« fuw hurilurb. still luiirid id lliu 
: Wild in thp United '".taTfls. 



<mrot rot ante: KkaM*. s ^drvrmj^Contert? -;riv#priota2> ^p.rojqi-r. 



Chapter 6: Creating a Profile or Portfolio Site 



Creating Neu! Pages from a 



Stuff \lou 
Need to Knort 


Toolbox: 




Adobe Dreamweaver 


The portfolio template 


(portfolio 


. zip 


from Digital 


Family . com/diy) 


Your own text a 


nd 


images, to personalize 


the template be 


inner 




needed: 




half a day 


^^^^ 









The Portfolio template features two Dynamic Web Template files that can 
be used to generate additional pages. In this task, you create new pages 
from a Dynamic Web Template and make global changes to those pages by 
editing the template file. 

Before you can complete this task, you must complete the site setup 
process in Dreamweaver. If you completed the preceding task, "Customizing 
the Portfolio Home Page," you should be ready to go; if not, you first need 
to complete Steps 1 through 3 in the previous task. (For more detailed 
instructions on the site set-up process, see Chapter 5). In this example, 
I use the gallery . dwt template to create a series of pages to display a 
collection of photographs. 
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7. To give you a head start on this gallery Web site, and to set 
all the links to the main pages and galleries on the naviga- 
tion bar, I already created pages named galleryl . html, 
gallery 2 .html, and gallery3 .html. These three pages 
were created from the gallery . dwt Dynamic Web 
Template, which you use in this set of steps. However, to 
keep the links working and ensure that the first page of 
your gallery appears when a user clicks on the correspon- 
ding link on the navigation bar, you should first edit the 
main gallery page. In this example, I create the second 
gallery with the deer photos, so I start by opening 
gallery2 .html. 
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2. To replace the image placeholder in the middle of the 
page with a photograph, double-click to select the place- 
holder image and then in the Select Image dialog box, 
click to select a photograph to insert into the page in its 
place. To enter a caption, delete and replace the text that 
appears beneath the photo. (Remember that if you use 
this technique to replace the image, you need to click to 
select the image after it's inserted and enter a text 
description of the image in the Alt field in the Property 
inspector.) 



3- To add a second page to this gallery by using 
the gallery . dwt Dynamic Web Template, 
choose FileONew. Then, in the New Document 
dialog box, choose Page from Template (from 
the options on the left). Make sure that the Web 
site you're working on is selected in the middle 
column, and choose the gallery template from 
the right-hand column. (Notice that a preview 
of the selected template is displayed on the far 
right side of this dialog box.) Click Create to 
generate a page from the template. 



Now Document 



Pxpi hnvi Thi^Ip- 



n 



Ai CdH Ww Huihh 

Aj E*Kgfw fc i 

■ah lyt:s 

il» Fii&rw r.Tn 

Ai 1 'Ma 'jfier- 

j±, 3 |r._ 

jh. KWww 

^i, j.in;nj«! I Ami lb 

■sh LETcreiria riUmh 

it ■!- 

< Tttiiri « 



T^-riKt ha jt.t "My Pr->: < 5tt' 




] [ 



Chapter 6: Creating a Profile or Portfolio Site J 



Dro pBooks 



I t U L. . Jj ff! . J B L „_ B Li. f H.', 1. .I, let 



~H mt pm is — psx xn 1 



Portfolio Name 



■MO ■ MOl 




4- Don't be confused by the fact that I'm working 
on the second gallery in this example. You will 
follow the same steps for each of the three gal- 
leries, and you can work on them in any order. 
Before you do anything else, save the new page 
by choosing FileOSave (or by using the key 
combination Ctrl+S on a PC or §€+S on a Mac). 
Because I know that I will create a series of 
pages for Gallery 2, 1 created a new folder 
named gallery 2 as I saved this page and then 
saved the new gallery page into that folder. The 
first page of the gallery was already created in 
the original template folder and it's named 
gallery 2, so I decided to name my new page 
gallery2b . html. I'll name the third page 
gallery 2c .html. Using a naming convention 
that helps you keep track of the order of your 
images makes it easier to set the links among 
your gallery pages, which you do in Steps 7 
through 9 of this task. 



5- Again, to replace the image placeholder in the 
middle of the page with a photograph, double- 
click to select the placeholder image and in the 
Select Image dialog box, click to select a photo- 
graph to insert into the page in its place. 
(Remember that if you use this technique to 
replace the image, you should click to select 
the image after it's inserted and then enter a 
text description of the image in the Alt field in 
the Property inspector.) To enter a caption, 
delete and replace the text that appears 
beneath the photo. 
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6. Repeat Steps 3 through 5 to create additional 
gallery pages, save them in the new gallery 
folder you created, and add a photo and caption 
to each page. To link the pages, click on the tab 
to bring the first gallery page to the front of the 
workspace. In this example, the first page is 
named gallery2 .html. (If it's not still open, 
choose FileOOpen and open the first of the 
pages in the gallery you're working on.) 
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7. To add links among the pages of 
the gallery, first add some text 
above or below the image. In this 
example, I added Previous 
Image ~ Next Image. Next, you 
need to link the text to the corre- 
sponding image page by clicking 
and dragging to select the text you 
want to use as the link and then 
clicking the link icon in the upper- 
left corner of the workspace. (The 
icon looks like a link in a chain.) 



5. In the Hyperlink dialog box, click the Browse 
button (it looks like a yellow file folder) to the 
right of the Link field, and then navigate on 
your hard drive to the file you want to link 
to. In the figure, I'm linking to the second 
image in the new gallery, which I named 
gallery2b . html and saved in a folder named 
gallery2. Click OK to finish setting the link 
and close the dialog box. 
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9* Open the second page in the gallery. 
In this example, it's the page named 
gallery 2b . html. Again add text 
to the page, such as Previous 
Image ~ Next Image. Click and 
drag to select the text (Next 
Image) in the page that will be 
linked, and then click the Link icon 
to open the Hyperlink dialog box. 
Browse to find the next page in the 
sequence (in this example, 
gal lery2c .html) and double-click 
to select that page. Click OK to 
close the dialog box and set the link. 
Then click and drag to select the 
text you want to link to the previous 
image, click the Link icon, and 
browse to select the previous file — 
gallery2 . html. Click OK to close 
the dialog box and set the link. 
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10. Continue setting the next and previous links 
among each of the pages in the gallery. To 
f \ Isafr eJ^m^^lu^j^ use the copy-and-paste 

| J I fl Itey rii life fJ^pfey ne text f rom one gallery 

page to anotherjfT you followed a similar 
naming convention, you can simply highlight 
the linked text after it's copied to the new 
page and then change the name of the file in 
the Properties inspector, at the bottom of the 
workspace. 
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/ 7. For the first and last gallery pages, either 
include only one link (to the next or previous 
image, as appropriate) or link back to the 
first image from the last and to the last image 
from the first so that a visitor to the site can 
continue through the images repeatedly. (To 
save numerous pages you're working on at a 
time, choose FileOSave All.) 
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/2. Because the banner graphic is in a locked region at the top of the gallery 
page template, replace the banner at the top of all these gallery pages 
automatically by simply replacing the gallery image once in the tem- 
plate. To do so, open the gallery . dwt file, located in the Templates 
folder. 
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74- Make any other changes you want to the tem- 
plate file, such as changing the text About 
the Artist on the navigation bar to About 
the Photographer. (Be sure to change this 
text on the top and bottom navigation bars.) 
After you complete all the changes you want to 
make to the template, choose FileOSave, and 
Dreamweaver automatically updates all pages 
created from this template — including the 
galleryl . html and gallery2 . html pages 
and the about . html page in this site. 
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73- With the template file open, click to select the 
banner image placeholder and delete it by 
pressing the Delete key. Then, without moving 
your cursor, choose InsertOlmage and select 
the image you want to use in its place. In this 
case, I replaced the placeholder image with the 
same Nature Photographer banner that I cus- 
tomized in the first task in this series. Because 
this site is created with two different templates, 
you can use a different banner image in the 
gallery . dwt template than the one used in 
the main . dwt template, which was used to 
create the home page. 



15. Always preview your pages in a Web browser 
as you're working on a Web site so that you 
can test your links and ensure that your pages 
are displayed properly. Preview a page in 
Dreamweaver by choosing FileOPreview in 
Browser and then selecting a Web browser 
from the list. 
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DropBocftiating a Business Web Site 
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Once in a while, I still meet small-business owners who ask, 
"Do I really need to have a Web site?" Yet, for the most 
part, it seems that the owners of even the smallest businesses 
have caught on. Today, the answer is easy: "Anyone who wants to 
promote their business needs a Web site." 

Whether you're creating a site for the first time or redesigning a 
site that you think could serve your business better, you'll find 
what you need in this chapter. You walk through the steps of cus- 
tomizing two distinct template designs that work well for small 
businesses. And, remember: You can use any of the templates in 
this book for a business site by following the instructions to per- 
sonalize the pages and images. 



Introducing the Business Site Template 

I call the main template featured in this chapter the Jellyfish template because it was 
inspired by the images featured in the Jellyfish aquarium site you see in the figures 
at the beginning of this chapter. As with all other templates in this book, you can 
alter this one a little or a lot and use it for any kind of site you want to create. 

If you want to rename any of the files or folders in this template site, be sure to do so 
in the Dreamweaver Files panel, to ensure that Dreamweaver automatically adjusts 
the links that correspond to the files. 

In this chapter, you find templates designed to be used in an image editor, such as 
Photoshop or Fireworks, as well as the Jellyfish template, which can be used in 
Dreamweaver. The starter image is named Front Page -Template . tif . 

To help you get started with your business site, I included starter pages for each 
of the main sections that a business site commonly needs. The links in these 
starter pages are already set on a navigation bar across the bottom of the page. 
You can customize the overall look and feel of these pages by editing the template, 
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Jellyfish-Template . tif , on which the pages are based. You find this file in the 
Templates folder inside the Jellyfish Template folder. You can also add or remove 
pages and change the links as necessary. The following list describes the files and 
foldf rs that get you started when you first open the Jellyfish template: 



wjj^kx Vraex.html: This page is the front page of your Web site. The main page of 
any Web site should be named index; the rest of the pages can be named 
anything you like, as long as you don't use spaces or special characters. 

\^ about.html: List information about the subject of your site, such as a biog- 
raphy of a person or a description of a business or service. 

)^ page-l.html: List additional information or create a new section of your site, 
such as a listing of products, services, or staff. 

)^ page-2.html: Use this page for any additional information. You can add 
pages as necessary by following the instructions later in this chapter for 
adding new pages to a template site. 

)^ contact.html: Add contact information to this page. 

\^ images: All your template image files are in this folder, in TIFF format. You 
also find in this folder optimized JPEG files that you can use as you follow 
along with the tasks. 

You also find subfolders in this Web site template folder. The images folder contains 
the starter images for this site and provides a good place for you to store any images 
you want to add to the site. You also find the ess folder, which is where I saved the 
CSS file that accompanies these page designs. As with all other templates that 
accompany this book, you can alter this one a little or a lot and use it for any kind of 
site you might want to create. 
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Editing and Sizing Images for the Template 




Toolbox: 

Photoshop Elements 
The start image 
FrontPage- 
Template . tif , 
located in the images 
folder in the Jellyfish 
templates from this 
book's companion Web 
site (see the Introduction 
for details) 
Your own text and 
images, to personalize 
the images 



Time needed: 

About an hour 




I like to prepare at least some of my images in a program like Photoshop or 
Photoshop Elements before I even start working in Dreamweaver. To help 
you get your images ready for this design, I included a starter image, which 
is a graphics file composed of many different layers, each containing a sep- 
arate element in the design. 

In this task, you use this starter image as a guide as you prepare the photos 
and other images you want to use in your site. In the task that follows, you 
copy and paste your own photos into the starter image and use it as a 
guide as you resize your images to fit the Web site template. After you have 
all your images in place, you crop out each one and use the Save for Web 
option to optimize them for the Web. 

The front page of this template design has several elements — photos as 
well as text — and it can be altered in many ways. The more you change 
the design in Photoshop, the more you need to alter the corresponding 
template in Dreamweaver. 
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1. 



Launch a graphics program, such as 
Photoshop CS3 (as shown here), 
choose FileOOpen, and open the file 
named FrontPage-Template . tif. 
The tricky part about this front page 
design is that one large image takes 
up most of the area at the top, and 
then three smaller images below it 
link to each of the main sections of 
the site. For best results with this 
template, create images that are 
exactly the same size as these so 
that you can replace them in the 
Dreamweaver template without 
disrupting the layout. 
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If you see the error message "Some text layers contain fonts that are missing" when you open the Front 
Page-Template . tif starter image, it simply means that you don't have on your computer's hard drive 
the fonts I used in the template. If you choose the Text tool in Photoshop or Photoshop Elements and start to 
edit the text in this file, the program automatically changes the text to a font that's on your hard drive. You can 
then click and drag to select the text and use the options at the top of the workspace to change the font, size, 
and color to best suit your design. 
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2. You can copy and paste images into this tem- 
plate by choosing FileOOpen and selecting any 
image from your hard drive. In this example, I 
opened a photo of a jellyfish, which I want to 
use as the big image at the top of this page. To 
copy an image into the template, first choose 
SelectOAll to select the image, and then choose 
FileOCopy to copy it. 



3- Click anywhere on the template image to make 
it active in the workspace. (If the template 
image is hidden by the new image, choose 
WindowOFrontPage-Template.tif to bring the 
template to the front of the workspace before 
you paste.) Chose FileOPaste to insert the new 
image into the template. After you paste an 
image, like this photo, you can click anywhere 
within the image and drag to adjust its place- 
ment. You can also click and drag a corner to 
adjust the size of the image. 




You can edit the starter images for this site in any image editor that supports layers, including Fireworks, 
Photoshop Elements, and Adobe Photoshop CS3, which I used in this exercise. 




If the image you're adding to a template is significantly larger than the template file, resize the new image before 
you copy and paste it into the template image. The image size for each image is displayed in the template. You can 
change the resolution and dimensions of an image by choosing ImageOSize and adjusting the settings. You can 
make minor changes to the size of an image by clicking and dragging any corner of an image after it's inserted into 
the template image. (More detailed instructions for resizing and optimizing images are in Chapter 4.) 
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4. To edit the text, select the Text tool 
from the Toolbox. Then click and 
drag to select the text, and type to 
replace it. Use the options at the top 
of the workspace to change the font, 
size, and color. In this example, I 
clicked the color well at the top of 
the page to change the text color. To 
delete any of the text in the image 
template, click and drag to select it 
and press the Delete key. 



5- To reposition text on the page, click to select 
the Move tool from the Toolbox. (In Photoshop, 
the Move tool is represented by the double- 
headed crossed arrow icon at the top of the 
Toolbox. Then click and drag any section of 
text. Tip: If you click and drag a corner, you 
change the size of the text; if you click in the 
middle of a text area and drag, you move it. 
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Use the three placeholders at the bottom to add 
and size three more images, which will serve as 
links to other pages in the site after you insert 
the images into Dreamweaver. The same tech- 
niques you used in Steps 2 through 5 work for 
the smaller images; the main difference is that 
you size the smaller images to the dimensions 
indicated in their respective boxes. 



7. After you make all the changes you want to the 
template, you need to save it. Here's a trick: 
Choose Save to save a backup copy of the tem- 
plate with your design and then choose Save As 
and give the file a new name, to create a copy of 
your design. That way, you preserve the design 
that you just took such care to create before 
you start cutting it up in the steps that follow. 
Remember that if you ever want to go back to 
the original starter image, you can always 
download it again from this book's companion 
Web site. 
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8. The big challenge in designing a 
page like this one in Photoshop is 
deciding how you want to slice it 
into separate images that you can 
insert into your Web pages in 
Dreamweaver. Photoshop has a 
Slice tool, but I prefer to crop out 
each part of the image separately so 
that I have more control over how I 
optimize it during the Save for Web 
process. A good place to start crop- 
ping is the main image placed at the 
top of the page. First choose the 
Crop tool from the Toolbox, and 
then click and drag to select just 
the large image at the top. 



9* You can drag the corners of the crop 
outline to adjust how the image will 
be cropped. To complete the crop, 
just double-click in the middle of the 
crop area, or click the Cropping tool 
again and choose Crop. 
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/ 7. In the Save For Web dialog box, 
choose the best file format and 
compression settings for your 
image. If you're unsure, see 
Chapter 4 for a refresher on when 
to save files in GIF, JPEG, or PNG 
format and how best to use this 
dialog box. After all the settings 
are the way you want them, click 
OK. In the Save dialog box, give 
the image a new name and save it. 
When you use the Save for Web 
dialog box, you create a copy of 
the image in its new, optimized 
format. As a result, after you close 
the Save for Web dialog box, the 
original image remains open and 
unchanged in Photoshop. 



10. After you crop out just the banner image, save 
it as a new file that you will insert into your 
Web page. Choose FileOSave For Web & 
Devices. 
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/ 2. To quickly get back to the completed page design 
so that you can crop the next image, choose 
EditOUndo until you have undone the crop. Now 
you're ready to crop out the next image and 
again use the Save for Web dialog box to opti- 
mize the image so that you can insert it into the 
template, which you do in the following task. If 
you can't undo the crop for any reason, you can 
always go back to the backup copy you created 
in Step 7. 
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Putting the Home Page Pieces Together 

atfer 




Stuff l/ou 
Need to Know 



Toolbox: 

\* Adobe Dreamweaver 
The Jellyfish template 
(from this book's com- 
panion site; see the 
introduction for details) 
Your own text and 
images, to personalize 
the template 

Time needed: 

About half a day 




In this task, you set up a new Web site using the Jellyfish template and start 
customizing the pages. 

As you work through the following steps, remember that you can alter this 
template a little (by simply adding your own text and images) or you can 
alter the design a lot by changing the colors, font options, and other style 
settings to make the design more your own. 



Site Definition for Jellyfish Template 



Basic Advanced 



y 



Category 



Local Info 



Local Info 



Remote Info 
Testing Server 
Cloaking 
Design Notes 
Site Map Layout 
File View Columns 
Contribute 
Templates 
Spry 



Site name: iB I B ffl i iffl lffi fl EI 



Local root folder: C:\Documents and 5ettings\Janine Warner\My Do _J 

% 



Default images folder: C:\Docurnents and Settings\Janine Warner\My Do 



Links relative to: 0 Document O Site root 



HTTP address : http : //www . jellyrancher . com/ 



This address is used for site relative links, and for 
the Link Checker to detect HTTP links that refer to 
your own site 

Case-sensitive links: Ouse case-sensitive link checking 

Cache: 0 Enable cache 

The cache maintains file and asset information in 
the site. This speeds up the Asset panel, link 
management, and Site Map features. 



OK 



Cancel 



Help 



h In Dreamweaver, choose SiteONew Site. In the Site 

Definition dialog box, click the Advanced tab. In the Site 
Name text box, type a name for your site. In this example, 
I entered Jellyfish Template. Click the Browse icon 
next to the Local Root Folder text box, and locate on 
your hard drive the folder that contains the Jellyfish tem- 
plate files. (Note: You can rename the folder.) Click the 
Browse icon next to the Default Images folder field, and 
select the Images folder in the Jellyfish template folder. 
Then click OK. If you haven't yet selected the Enable 
Cache option, a message box appears, asking whether 
you want to create a cache for the site. Click Yes to speed 
up some of the Dreamweaver display features. 
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2. When you complete the site-setup 
process, the files and folders in the 
Jellyfish template are displayed in 
the Files panel in Dreamweaver, at 
the side of the workspace. Double- 
click the index . html file to open 
the home page in Dreamweaver. (For 
more detailed instructions on the 
site-setup process, see Chapter 5.) 



3- At the top of the home page, you can change 
the page title, as I'm doing here, by replacing 
the text in the Title field. Include your name or 
business name or a brief description to identify 
your site, such as I did in this example, with the 
words Jelly Rancher, specializing in 
j el ly fish aquariums. The page title is the 
text that appears at the top of the browser 
window when a page is viewed online; this text 
is saved in a list of sites if someone bookmarks 
the page. (In this example, you can see that I 
replaced the main graphic at the top of the 
page with the large image I cropped out of my 
image template in the previous task.) 
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4. You can replace any of the image placeholders 
with images you prepared in an image editor. To 
insert an image, double-click any image place- 
holder to open the Select Image Source dialog 
box. Alternatively, you can delete any image 
placeholder and then select the Insert Image 
icon from the Common insert bar, at the top of 
the workspace. 
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5. In the Select Image Source dialog box, navigate 
on your hard drive to find the image you want 
to insert, and then double-click the image file- 
name to select it. As you see in this example, I'm 
now inserting the images that I resized and opti- 
mized in the previous task. If the image you 
select isn't already located in your root site, 
Dreamweaver offers to copy the file into the 
root folder after you select it. If this automated 
feature is disabled for some reason, you must 
copy the image into the root folder and ensure 
that the image path in the Property inspector 
reflects that location. 



6. To add or replace other images, select the 
image and then follow Steps 5 and 6, selecting 
each image from your hard drive in turn to add 
to the template. To add a border to an image, as 
you see with the three images across the 
bottom of this design, enter a number, to repre- 
sent pixels, in the Border field. The borders you 
see featured in these figures are 2 pixels wide. 
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7. 



8. To change the text size or color in 
these captions, you need to edit the 
style sheet that controls the design 
of this page. To do so, open the CSS 
panel (if it's not open already) by 
choosing WindowOCSS Styles. In 
this design, the font in the captions 
at the bottom of the page is speci- 
fied in the style named #Footer. To 
change the font face, size, or color, 
double-click the style name in the 
CSS Styles panel. 



You can add text by typing it into any part of the page. 
For example, you can add captions under the photos by 
replacing the placeholder text there. Be careful not to 
delete the formatting when you delete the holder text. If 
you have trouble adding text without altering the 
format, use Undo to back up a step and try again. 
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▼ CSS 

CSS Styles 



AP Elements 



All 



Current 



All Rules 



— bodyjtdjth 
— -^container 
— #copyright 
— #header 
— #mainContent 
— a:link 
— a: visited 
— a:hover 
— a: active 
— #footer 
— #footer img 
— #nflv1 




Properties for "ttfooter" 

background-color ■ #0B2353 
font-family Verdana, Arialj Helvetica, 

font-size small 



height 



sa. . . 



text-align 
Add Property 



pixels 



In the CSS Rule Definition dialog 
box, use the settings in the Type 
category to specify how you want 
your text to appear on the page. 
You can make other changes to 
this design by using this same 
dialog box to alter the style defini- 
tions. For example, you can change 
the background color for the entire 
page by editing the body style. You 
can change the background for the 
main design area by changing the 
#container style. And, you can 
change the background color at 
the bottom of the design by alter- 
ing the # footer style. 



10. To change the layout of the page, you need to change 
other styles, such as the height of the mainContent 
style, which you find in the Box category in the Style 
Definition dialog box. The height of the mainContent 
style is set to match the size of the main (top) image in 
this example, but you can adjust it if you prefer to use a 
smaller image. You can also change the height of the 
footer if you want to use larger images or bigger text in 
the footer at the bottom of the page. (Tip: You can edit 
CSS rules by double-clicking a style name to open it in 
the CSS Rule Definition dialog box, or you can edit styles 
in the Properties pane, just below the CSS Styles panel, 
by clicking a style name once to display its properties 
there.) 

For more instructions on working with CSS, see Chap- 
ter 5. For instructions on how to upload your site to a 
Web server, see Chapter 9. 
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/ 7. To test your work in a Web browser, choose 

FileOPreview in Browser and select any browser 
on your hard drive. For best results, test your 
work in a variety of Web browsers, to ensure 
that your pages designs look good for all visi- 
tors. In this figure, the page is displayed in 
Firefox. 
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Creating New Pages from a 
$&&&R$ e ^ template 



Stuff \lou 
Need to Know 



Toolbox: 

Adobe Dreamweaver 
The Jellyfish template 
from Digital 
Family . com/diy 
Your own text and 
images, to personalize 
the pages 

Time needed: 

About half a day 




The Jellyfish template features two designs. The front page design, which is 
a simple HTML file, should be edited independently, but all the rest of the 
pages in this site were created from a Dynamic Web Template. You can 
therefore edit only the main content area of those pages and must edit the 
template itself to make changes to the banner or footer area of the pages. 
The benefit of this restriction is well worth the extra effort because any 
change you make to the template automatically updates all pages created 
from the template. 

In this task, you learn how to create new pages from a Dynamic Web 
Template as well as how to make global changes to those pages by editing 
the template file. Before you can complete this lesson, you must complete 
the site-setup process in Dreamweaver, covered at the beginning of the pre- 
ceding task. 




7. To give you a head start on this Web 
site design, the Jellyfish template 
folder has several pages that have 
already been created and linked 
together. You can edit any of these 
pages, such as the about . html 
page, by simply double-clicking the 
name in the Files panel to open it. 
It's common practice to include a 
page on your Web site that explains 
what the site is about or includes 
biographical information about the 
site's creator, like you see in this 
figure. 




Because the pages in the Jellyfish Template site were created from a Dynamic Web Template, parts of the page 
are locked. To change the banner image at the top of the page, or to edit the text, links, or copyright information 
at the bottom of the page, you need to edit the Dynamic Web Template file (as you see later in this task). 
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2. Similarly, you can double-click to 
open the contact . html file using 
the Files panel. To add or edit con- 
tact information, just click and 
drag to select any text you want to 
delete and then type to replace it. 
If you need to add a main contact 
as well as contact info for your 
sales staff, for example, you can 
use copy-and-paste to repeat the 
text as it's formatted and then 
replace it with your own contact 
information. 



3- To add a new page to this Web site by using 
the template, choose FileONew. Then, in the 
New Document dialog box, choose Page from 
Template (from the options on the left), make 
sure that the Web site you're working on is 
selected in the middle column, and choose 
Jellyfish- template from the right-hand 
column. (Notice that a preview of the selected 
template is displayed on the far right side of 
this dialog box.) Click Create to generate a page 
from the template. 
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4. Before you do anything else, always save the new page 
by choosing FileOSave, or press Ctrl+S [in Windows] or 
§§+S [on the Mac]. I named this page aquariums . html. 
You need to change the page title by editing the tem- 
plate, as you see in a later step. 
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Jellyfish Aquariums 

Creating a viable Jellyfish aquarium requires 
careful attention to achieve the perfect balance of 
salinity and water circulation. 

Unable to 3wim independently, Jellyfish must 
rely on the currents to move around in their 
environment, requiring a specialised circulation 
system, A typical aquarium system is designed 
to hirer our i m p en ded particles. Since jellies are 
suspended in the water column they would 
quickly be Uttered out' of a r«jguljr jquariurn. 

Scientists designed a special type of tank called a KrertH to allow the study and display of these delicate 
animals. The unique way in which water enters and leaves a krtisel allows the jelly, ' 

and on display. 

For information on pricing, customisation, and how to place an order for a .Jellyfish 
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5- To replace the image placeholder, 
click to select the placeholder, 
press the Delete key, and then, 
without moving the cursor, choose 
InsertOlmage. In the dialog box 
that appears, select any image on 
your hard drive. To change the 
alignment of an image, first click to 
select the image. Then, using the 
drop-down list in the Class field in 
the Property inspector (at the 
bottom of the workspace), select 
image -right to align an image to 
the right, or select image- left to 
left-align it. 



6. The image styles in this template 
are designed to align an image to 
the left or right so that any other 
content in the page can wrap 
around it, as you see in these fig- 
ures. You can alter the image styles 
by double-clicking the style name 
in the CSS panel and making any 
changes you want in the CSS Rules 
Definition dialog box. 
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7. To add text, simply place your cursor in the area 
of the page where you want to add text and then 
type to enter it. You can also use the standard 
copy-and-paste features to add text from 
another file, such as a Microsoft Word document 
or a Web page. To change the text color, font, or 
size, double-click the Body style in the CSS panel 
and specify the options you prefer in the Type 
category. Repeat Steps 2 through 6 to create 
additional pages from the template. 
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8. To edit the template itself, which is how you 
can change the banner graphic or alter the links 
or copyright information at the bottom of the 
page, double-click the name in the Files panel to 
open the jellyfish- template . dwt file 
located in the Templates folder. 



9* With the template file open, click to select the 
banner image placeholder and delete it by 
pressing the Delete key Then, without moving 
the cursor, choose InsertOlmage and select the 
image you want to use in its place. In this case, 
I replaced the placeholder image with a banner 
I created in Photoshop. (You find instructions 
for editing a banner image in Chapter 6, and 
you find a starter image for this graphic, named 
banner . tif , in the Images folder in the 
Jellyfish template folder.) Choose FileOSave, 
and Dreamweaver automatically offers to 
update all pages created from the template. 
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10. You can also make other changes to the tem- 
plate file, such as changing the text on the navi- 
gation bar at the bottom of the page. To edit the 
text, simply click and drag to select each linked 
section of text in turn, and replace it by typing 
the text you want to use in its place. In this 
example, I changed pagel to Jellyfish 
Tales. 



/ 7. Changing the text links doesn't alter the file- 
names, but you can change those as well by 
clicking to select each file in the Files panel and 
typing to replace the name. Keep two concepts 
in mind when you do this: First, you should 
change file or folder names only in the Files 
panel, to ensure that Dreamweaver updates the 
links, as you see here; second, filenames 
shouldn't include any spaces or special charac- 
ters except for the underscore (_) and dash (-). 
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72. To change, set, or fix links, you 
first click and drag to select the 
text you want to link (or click to 
select an image to use as a link). 
Then click the Browse button, to 
the right of the Link field in the 
Property inspector (it looks like a 
yellow folder) and double-click to 
choose the name of the file you 
want to link to. Again, when you 
save the template, Dreamweaver 
prompts you to automatically 
make the change to all pages cre- 
ated from the template. 



73- Always preview your pages in a 
Web browser as you're working on 
a Web site, but beware that many 
Web browsers don't display a 
Dynamic Web Template. Thus, to 
test your work on the template, you 
need to open one of the pages you 
created from the template and then 
choose FileOPreview in Browser 
and select a Web browser, such as 
Firefox (shown here), from the list. 
With a page open in a browser, you 
can click the links to test your work. 
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DropBooftfeating a Family, Vacation, 



or Hobby Site 



4 



Tasks Performed 
in This Chapter 

^Working with the 
templates 

is Designing a site for 
your entire family 

is Editing image 
templates 

j> Creating image 
maps and links 

j> Creating rollover 
images 



There are many excellent reasons to create a family Web site, 
slide show, or photo gallery From the announcement of a new 
baby to sharing the latest vacation snapshots, digital designs are a 
great way to keep in touch with family and friends. 

The best family sites include room for everyone in the clan, and as 
you see in the sample family site and lessons in this chapter, you can 
easily adapt this design to create sections for each member of your 
family, club, or organization. 



Getting Started With the Family or 
Group Site Templates 

In this chapter, you find templates that can be used in Dreamweaver as well as 
starter images designed to be used in an image editor, such as Photoshop or 
Fireworks. The sample site created in this chapter is for a family site with separate 
pages for each member of a family, but the same templates can be used for any small 
organization, group, or business. (Check out the before-and-after shots of this 
sample site in the color insert for a quick look at the type of layout you can create.) 

These templates are designed to showcase a lot of images and would work well for 
an art or photo collection, to illustrate business services or products or to share 
photos with family and friends. As you work through the tasks, you find instructions 
for changing the names, images, and text in these templates for any kind of site you 
want to create. 



As you follow the instructions for creating the family site featured in this chapter, 
you find out how to customize pages, add or remove pages to accommodate smaller 
or larger Web sites, and create advanced features, such as rollover images and image 
maps. Because customizing this site involves editing graphics as well as HTML files, 
you find separate tasks for each section of the site: 



J ^0 Part II: Putting the Pages Together 

The first task shows you how to customize the banner, text, and images by 
using Photoshop Elements. You also find out how to add and position 
images to create the page designs for each section of the site. 

£fce second task shows you how to set up a site in Dreamweaver and how to 
the front page. 

The third task covers how to edit Dynamic Web Templates in Dreamweaver, 
make changes across many pages at once, set links to pages, create an 
image map, and remove pages from the design. 

The fourth task features a more-advanced Dreamweaver lesson in how to 
create rollover images so that you can create effects, such as the change in 
text color of links when a user rolls a cursor over an image and it's replaced 
with another image. 

Before you get started with these tasks, here's a quick overview of the template and 
files used in this chapter. To help you get started with this site, and to ensure that 
the links on the navigation bars work properly, this template includes starter pages 
for each of the main sections of this site. Although you can add or remove pages and 
change links as necessary, this list describes the files and folders that get you 
started when you first open the Family template: 

1^ index . html: This is the name of the front page of the Web site. The main 
page of any Web site should be named index; the rest of the pages can 
be named anything you like, as long as you don't use spaces or special 
characters. 

1^ images: You find all template image files in TIFF format in this folder. You 
also find optimized JPEG files in the images folder and can use them as you 
follow along with the tasks. 

ess: You find the external style sheets that are attached to the template 
files in this folder. 

Templates: In this folder, you find the dynamic Web templates used to 
create the files in this site. 

pages: This folder stores all the pages for the individuals in your site and 
includes these ready-to-use pages: 

• mom . html: For a parent 

• dad . html: For a parent 

• child-1 .html: For the first child 

• child-2 .html: For the second child 

• child-3 .html: For the third child 

• child-4 .html: For the fourth child 

• other . html: For anyone else you want to add, like the aunts and uncles 
featured in this example. 

You can rename files by using the Dreamweaver Files panel. As you see in Figure 8-1, 
the Files panel lists all pages in a Web site; when you make changes in this panel, 
Dreamweaver automatically adjusts any corresponding links. If you stick to changing 
only filenames or folders in the Files panel, you never have to worry about breaking 
links. 
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Figure 8-1 : You start with the general filenames but you c 
them to reflect family members' names in the 



an change 
Files panel. 
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Getting everyone Working on your Web site 



f^dev all the ways you can share 
foV^s'atolHbhotos with family members 
and friends in your own family Web site, 
make sure to include your entire family in 
the planning-and-development process. 
Here are a few ways you can get family 
members of all ages involved: 

is Ask older family members to write about 
special occasions and family traditions. 

Scan in artwork from younger family 
members, and include those images on 
the site. 

is Invite the family historian to help create 
a family tree and other historical records. 



^ Scan in photos from old photo albums 
(and don't forget to sort through those 
boxes of old photos in your attic and 
closets). 

is Include links to clubs, associations, and 
hobby sites, to showcase your family's 
favorite activities. 

^ Keep the site updated with photos from 
everyone in the family, by sharing an 
online photo album at Flickr, Shutterfly, 
or Kodak Gallery. It's simple, as I explain 
in Chapter 6. 
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Editing Image Templates 




Toolbox: 

Photoshop Elements 
j> The Home -Page - 
starter image, 
tif file from the Family 
Web Site template (see 
the Introduction for 
details) 

Your own text and 
images, to personalize 
the template banner 



Time needed: 

About two hours 




These starter images are designed to showcase images, so most of the 
work in creating this site is best done in an image program, such as 
Photoshop Elements. The trick is to size and prepare all images before 
optimizing them and putting the pages together in Dreamweaver. In this 
task, you find instructions for adding your own images and text to the 
starter images included in the Family template. 

This front page starter image has several elements — photos and text — 
and it can be altered in many ways. In these steps, you resize and add a 
photo and then edit the text by changing its font size, color, and spacing. 
After you position and resize all images the way you want, you use the 
Save for Web feature to optimize them, to get them ready to insert into the 
template files in Dreamweaver. 




7. Launch a graphics program, such as Photoshop 
Elements (shown in the figure), choose FileO 
Open, and open the template graphic file 

Home-Page-starter image.tif. 



x 



I tad M.m I M I hiU - VmbmI < IlujJ t J..I.I Ami 




'.'..I IT 










ruirtiii 








72 ppi m<4ulu 











You can edit the image templates in any image editor that supports layers, including Adobe Photoshop CS3 and 
Photoshop Elements, which is used in this exercise. 




If, when you open this starter image, you see the error message Some text layers contain fonts 
that are missing, you simply don't have on your computer's hard drive the fonts I used in the starter 
image. If you choose the Text tool in Photoshop or Photoshop Elements and start to edit the text in this file, the 
program automatically changes the text to a font that's on your hard drive. You can then click and drag to select 
the text and use the options at the top of the workspace to change the font, size, and color to best suit your 
design. I used the Liorah font in this design. You can purchase and download the font from any number of sites 
on the Web; just search for Liorah in any search engine. 
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2. This starter image is made up of 
many layers, which makes it possi- 
ble to edit each piece of text and 
delete or replace each image inde- 
pendently You can view a list of 
layers by opening the Layers 
palette. Choose WindowOLayers 
and you see that this template 
image has many layers, each named 
to correspond to a section of text 
or an image in the template. Tip: 
Make sure that the Auto Select 
Layer check box, at the top of the 
workspace, is selected. Then you 
can select layers by simply clicking 
their contents. 



3- To edit the text in any image in Photoshop 
Elements, first click to select the Type tool in 
the Toolbox. 





4. With the Type tool active, click and drag to 
select a section of text and then type to replace 
the words. (If you're prompted with the mes- 
sage Font substitution will occur, click 
OK to continue; Photoshop automatically 
changes the text to a similar font on your hard 
drive.) 
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5. Adjust the Type tool settings on the Options 
bar, at the top of the work area, to change the 
color, font face, size, or other options. In this 
figure, I'm adjusting the font size for the 
selected text. 



6. To reposition text on the page, click to select 
the Move tool from the Toolbox. (In Photoshop 
Elements, the Move tool is represented by the 
double-headed, crossed arrow icon at the top of 
the Toolbox.) Then click and drag any section 
of text. Remember: If you click and drag a 
corner, you change the size of the text; if you 
click in the middle of a text area and drag, you 
move the text. 
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7. To add a photograph to a layer, you must first 
open the photograph as a separate file. While 
the starter image is sill open, choose FileO 
Open and select any image from your hard 
drive. In this example, I opened a photo of a 
father and son, which I want to add to the 
banner image at the top of the page. 
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5 to the template, first click 
age you want to copy, to 
make it active in the workspace. Choose 
SelectOAll to select the image, and then choose 
FileOCopy to copy it. Next, click anywhere on 
the starter image, to make it active in the work- 
space. (If the template image is hidden by the 
new image, choose WindowOHome Page Starter 
image to bring the file to the front of the work- 
space before you paste.) 
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9. Choose FileOPaste to insert the new image into 
the template. After you paste an image, like this 
photo, you can click anywhere within the image 
and drag to adjust its placement. You can also 
click and drag a corner to change the size of the 
image. 



10. As you add more images, you can adjust the layers by 
positioning one image in front of another, which is 
important when images overlap or when one image is 
obstructed by another. To move one layer in front of 
another, right-click and select an option to move the 
layer forward or back. To delete an image or text, click 
to select it and then press the Delete key. 
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Send Backward U£ 
Send to Back 



Edit Text 




If the image you're adding to a starter image is significantly larger than the starter image, resize the new image 
before you copy and paste it. You can change the resolution and dimensions of an image by choosing ImageOSize 
and adjusting the settings. (You find more detailed instructions for resizing images in Chapter 4.) 




You can add as many images as you like, and you can resize them and drag them around the page to change the 
layout. The more you alter this design in Photoshop, however, the more you need to alter it in Dreamweaver. For 
the purposes of this task, I show you how to edit images into these starter images just as it's designed so that 
you can easily reconstruct them in Dreamweaver. As you get more adept in both Photoshop and Dreamweaver, 
however, you can make more elaborate changes. 
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7 7. After you make all the changes you want to the 
starter image, be sure to save your work by 
choosing FileOSave. Then save the file again by 
choosing FileOSave As and name the new file, 
such as My- Family- Front -Page . That way, 
you have a backup copy of the design, in case 
you ever want to go back to it. 

If you ever want to go back to the original 
starter image, you can always download 
another copy from the Web site. 



72. The big challenge in designing a page like this 
one in Photoshop is deciding how to save each 
of the images as separate files that you can 
insert into your Web pages in Dreamweaver. 
A good place to start is the banner. Banners 
(including this one) typically appear at the top 
of every page in the site, but thanks to the 
magic of dynamic Web templates, you need only 
one copy of the image. To prepare the banner 
image for the Web, first choose the Crop tool 
from the Toolbox, and then click and drag to 
crop out just the top banner area. 



73. You can drag the corners of the crop outline 
to adjust how the banner will be cropped. To 
complete the crop, just double-click in the 
middle of the crop area or click the Crop tool 
again and choose Crop. 



74- After you crop out just the banner image, it's a 
good idea to save it as a separate file so that 
you can easily go back and make changes to it 
later, if you want. To do so, first, save the lay- 
ered version by choosing FileOSave As and 
giving it a new name, such as My Family 
Banner. 

Remember: Be sure to use Save As to make a 
copy of your banner. Doing so preserves all the 
work you've done on the full page design so 
that you can return to that page and crop out 
other pieces to use on your Web site. 
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15* Before you insert an image (like 
this banner) into a Web page, you 
need to optimize it. Choose FileO 
Save for Web, and in the Save for 
Web dialog box, choose JPEG from 
the Optimized File Format drop- 
down list. JPEG format works best 
for images that use millions of 
colors, such as photographs. 
(For more details about selecting 
options in the Save for Web dialog 
box, see Chapter 4.) 



16. After all the image settings are the way you want 
them, click OK. In the Save dialog box, give the 
image a new name and save it. 
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/ 7- To optimize other images for this 
design, open the Family Page tem- 
plate again and crop another image 
to save for the Web. After you save 
all the pieces of the design, you're 
ready to move on to the next task. 
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besiqninq a Web Site for the Entire Family 




Toolbox: 

Adobe Dreamweaver 
The Family Web Site 
template from the com- 
panion Web site (see the 
introduction for details) 
Your own text and 
images, to personalize 
the template 

Time needed: 

About half a day 




In this task, you set up a new Web site with the Family Web Site template, 
which can be used to create any site that features multiple people or sec- 
tions. As you work through the following steps, remember that you can 
alter this template a little (by simply adding your own text and images) or 
alter the design a lot by changing the colors, font options, and other style 
settings to make the design more your own. 



In Dreamweaver, choose SiteONew Site. In the 
Site Definition dialog box, click the Advanced 
tab. In the Site Name text box, type a name for 
your site. In this example, I entered My Family 
Site. Click the Browse icon next to the Local 
Root Folder text box and locate on your hard 
drive the folder that contains the Family Web 
Site template. 
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Click the Browse icon next to the Default Images 
folder field and select the Images folder in the 
Family template site. Leave the rest of the 
options in this dialog box alone for now, and 
click OK to close the Site Definition dialog box 
and save your settings. If you haven't selected 
the Enable Cache check box, a message box 
appears, asking whether you want to create a 
cache for the site. Click Yes to speed up some of 
the Dreamweaver display features. 




You can rename the Family Web Site Template folder before or during the site-definition process, but if you 
change the name after you complete this site-setup process, you have to complete this step again in 
Dreamweaver. 
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DropBooks 



3- When you complete the site-setup process, the files and 
folders in the Family Web Site template are displayed in 
the Files panel in Dreamweaver, at the side of the work- 
space. (For more detailed instructions on the site-setup 
process, see Chapter 5.) 
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4- Double-click the index . html file in the Files 
panel to open the home page. The home 
page of this site is designed to showcase 
photos and text created in an image pro- 
gram, such as Photoshop Elements. You can 
replace any of the image placeholders with 
images you've prepared for the Web. 



5. At the top of the home page, you can 
change the page title by replacing the 
text in the Title field. Include your 
name or a brief title to identify your 
page. (The page title is the text that 
appears at the top of the browser 
window when a page is viewed 
online.) 
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6. To insert your own images, double- 
click to select any image place- 
holder. Then click the Browse button 
in the Image Source dialog box, 
locate the image you want to insert, 
click to select the image you want to 
add to the page, and click OK. 



7. To add or replace other images, 
repeat Step 6. To delete an image or 
placeholder, select it and press the 
Delete key. 




Make sure that you optimize your images and save them in GIF, PNG, or JPEG format before adding them to 
your Web pages. You find instructions for saving images for the Web in Chapter 4. 
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Adding Image Maps and Links 
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Toolbox: 

Adobe Dreamweaver 
The Family template 
(from Digital 
Family . com/diy) 
Your own text and 
images, to personalize 
the template 
Note:You should have 
already completed the 
first two tasks in this 
chapter before you begin 



Time needed: 

About half a day 




If you're following along from the beginning of this chapter, you should 
have already optimized your images in Photoshop Elements and set up the 
Family template in Dreamweaver. Now you're ready to add image maps so 
that you can link the names of each family member in the banner image 
to their personal pages, for example. You also set links using text, and you 
use the template for personal pages to update all the family pages at once 
with the new links. 



7. Open the template family site in Dreamweaver, and open 
the Files panel by choosing WindowOFiles. Click the 
plus sign to open the Templates folder, and then double- 
click the Dynamic Web Template named personal- 
pages . dwt. All individual family pages in this template 
design are created from this Dynamic Web Template. 
The main area of the page should be personalized in 
each individual page. 
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2. The benefit of using this template is that you 
can replace the banner graphic at the top of this 
page and automatically change it on each indi- 
vidual page. To do so, click to select the banner 
image and delete it, and then choose Inserts 
Image and select the banner image you created 
for your site. 
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3- Choose FileOSave, and 

Dreamweaver prompts you with a 
notice to change all pages that 
were created from this template. 
Click Update to automatically 
update all pages with the new 
banner image. 



4- Open any individual family-member 
page, such as mom . html, and you 
see that the new banner appears at 
the top of the page. 
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5- The navigation bar at the bottom of this tem- 
plate is already linked to each of the individual 
pages. You can change the text for those links 
by clicking and selecting each name and typing 
the name you prefer. You can remove links by 
clicking to select the text and pressing the 
Delete key. 




You can change the name of any of these files in the Files panel, to reflect the name of a family member or the 
content of the page. When you change filenames in the Files panel, Dreamweaver automatically updates any 
links that correspond to the page. To do so, just click to select the name in the Files panel, type the name that 
you want to change it to, and press Enter (or Return). Then click Update when you're prompted to update the 
corresponding pages. Continue until you have renamed all the files. 
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each family 
er image to a 
ereht page, you can create an 
image map. To do that, click to 
select the banner image and in the 
Property inspector, click the lower- 
right corner to make sure that the 
inspector is fully open. 
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7. The image map tools are in the lower-left corner 
of the Property inspector. To create an image 
map, you first select the shape you want to 
create as a "hot spot" on the image. You can 
create as many hot spots as you like and link 
each one to a separate page in your Web site. 



8. With an image map tool selected, click and drag 
to create a hot spot on the image. In this exam- 
ple, I turned the name Kevin into a hot spot that I 
can link to the kevin . html page. (If you're 
prompted to describe the image map in the Alt 
field, simply type a brief description of the image 
map into the Alt field in the Property inspector.) 
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& After you create a hot spot, use the 
Browse button (the one that looks 
like a yellow file folder) in the Link 
field in the Property inspector to 
link to the corresponding page. 
Click to select the Browse button; 
then find the file you want to click 
to, and double-click to select it. 
Dreamweaver automatically sets 
the link. 
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10. To create more hot spots, select the 
Hotspot tool, click and drag to 
create the hot spot on the image, 
e a brief description of the 

£Y/o\ll^fiJield to serve as 
erhate^reA, anTT then use the 
Browse button to link to the corre- 
sponding page. To edit or adjust a 
hot spot, click the Pointer Hotspot 
tool in the lower-left corner of the 
Property inspector. You can then 
click and drag the corner of any hot 
spot to adjust its size and position. 
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/ 7, With all the links set in the banner 
and on the navigation bar at the 
bottom of the page, you're ready to 
save the template. 




When you add images or create an image map, it's always good practice to add a description of the image as 
alternate text. This text description appears in a Web page if the image isn't visible to visitors, and it's read aloud 
to visitors who use special screen reader browsers. You can add alternate text in the Accessibilities Attributes 
dialog box or by selecting an image or hot spot and typing it into the Alt field in the Property inspector. 
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Creating Rodotfer Images 
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Toolbox: 

Adobe Dreamweaver 
\* Adobe Photoshop 
Elements or a similar 
program that supports 
layers 

The Family template files 
from this book's compan- 
ion site (see the 
Introduction for details) 

Images to personalize 
the template 
Note:You should have 
already completed the 
preceding tasks in this 
chapter 



Time needed: 

About two hours 




Rollover images, as their name implies, are designed to react when 
someone rolls a cursor over an image. The effect can be as dramatic as 
replacing the first image with a completely different one or as subtle as 
changing the text color from blue to yellow, for example. 

The first step is to create two images that are exactly the same size. 
Although they can look completely different, they need to take up the 
same amount of space in the Web page so that the rollover works 
properly. 

In this task, you discover how to create two images in Photoshop 
Elements and use them in a rollover effect in Dreamweaver: 




/. Start by creating (in Photoshop Elements or a similar 
program) two images that are the same size. If you're 
using the Family template files, you can start by opening 
the file named Roll over -Image . tif in the Images 
folder. This image template is designed to create a row of 
three rollover images for the front page of the design. 
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2. One trick to creating a good rollover image is making 
sure that the text and other elements line up properly. In 
the template file, you can see that I achieved this goal by 
creating two layers (one for each color of text I'm using) 
and placing one text layer on top of another. You can 
turn layers on and off by clicking in the Layers palette, 
and you can identify the layers by their names — For 
example, First Child and First Child-2. 
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3. You can replace the text by selecting it and then typing 
text in its place. To change the text on both layers, click 
to turn each layer on or off in turn by clicking in the 
Layer visibility box, just to the left of each layer name in 
the Layers palette. The eye icon in the Layer visibility 
box indicates that a layer is turned on; if the box is 
blank, the layer is turned off. Use the Text tool in the 
Toolbox to replace the text, and use the Move tool to 
reposition it. 
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Add Photo 




4. 



Now the trick is to save each section 
of the rollover image as a separate 
file. Start by cropping out only what 
you want in each rollover. In this 
example, I'm cropping out just the 
first child's text and photo. (You find 
instructions for adding photos to 
these templates in the "Editing 
Image Templates" task, earlier in 
this chapter.) 
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5- After the image is cropped, turn on 
just the layers you want to appear 
when the image is first loaded on 
the page: Just click the eye icon to 
turn layers on and off. When you 
have only the layers you want visi- 
ble, choose FileOSave for Web and 
optimize the image for the Web. 



6. Then turn on the layers you want visible when 
the rollover image is triggered, and save a 
second copy of the image with a different name. 
I like to use the numbers 1 and 2 in the names 
so that I can easily distinguish between images 
when I create the rollover in Dreamweaver in 
Step 7. 
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7. After the images are prepared, 
open Dreamweaver and open the 
index . html page, where you set 
up the rollover. If you already 
added images to the index . html 
file, you can simply replace them 
with the rollover images you just 
created. Start by deleting any 
images you want to replace. 
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9. 



8. Click to place the cursor where you want to add 
the first rollover image and then choose 
InsertOlmage ObjectsORollover Image. 



In the Insert Rollover Image dialog box, first 
give the rollover a name. The name is used in 
the script that controls the rollover and must 
be one word with no special characters. Next to 
the Original Image field, click the Browse button 
and select the first image (in this example, 
mikayla-1 . jpg). Then click the Browse 
button next to the Rollover Image field, and 
select the second image (in this example, 
mikayla-2 . jpg). 
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/ft In the Alternate Text field, add a name or short 
description. Then use the Browse button at the 
bottom of the dialog box to select the page the 
rollover will link to, by clicking the filename. 
Dreamweaver automatically sets the link and 
includes the page name in the When Clicked, 
Go to URL field. 



/ 7. After you set all options in the dialog box, click 
OK. Dreamweaver automatically inserts the 
rollover into the page with the first image 
visible. 
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12. To test the rollover image, preview the page in 
a Web browser, by choosing FileOPreview in 
Browser or clicking the Preview icon at the top 
of the workspace. (It looks like a globe.) 



13. When you view the page in a Web browser, such as 
Firefox or Internet Explorer, you can see the rollover 
effect in action by rolling your cursor over an image to 
reveal the second rollover image in its place. 
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As you become more skilled in using the 
Dreamweaver behaviors and rollover image fea- 
tures, you can change any or all of the images on 
a page when you roll a cursor over an image. 




You can find lessons in controlling Dreamweaver behaviors, and other advanced features, at 

www . DigitalFamily . com/dreamweaver. 
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DropBdfekting and Publishing Your Site 



It's a shocking scenario: You work hard to create a page design 
that looks just perfect on your own computer, you publish it on 
the Internet and tell all your friends, and the next thing you know, 
your cousin in Iowa and your friends in Brazil are telling you that it 
looks terrible and the links are broken, and they don't know why 
you're wasting your time on all this crazy Web stuff. Don't let this 
happen to you. No matter how carefully you build your Web site, 
take some time to test your work before you publish the site for the 
entire world to see. 

Before you "go live" with your site, it's a relatively simple step to use 
the many Dreamweaver testing features to ensure that all your links 
and other features work properly, by following the step-by-step 
instructions in this chapter. You should also preview your pages in a Web browser — 
or two or three — to make sure that your site looks the way you intend in the many 
different browsers now in use on the Internet. 

In the first part of this chapter, you find detailed instructions for previewing pages 
and using the Dreamweaver testing tools. In the last part of the chapter, you find out 
how to use the built-in Dreamweaver File Transfer Protocol (FTP) features to copy 
your Web site from your hard drive to a Web server on the Internet. 

If you're looking for information about Web-hosting services and domain registration 
sites, you find in Chapter 2 some recommendations and tips for choosing a Web 
hosting service and registering a domain name. 

Understanding How and Why Browsers 
Affect a Site's Appearance 

One of the more confusing and frustrating aspects of Web design is that you can 
create a page design that looks good in Dreamweaver and then test it in a browser 
(like Internet Explorer, or IE), to confirm that it looks fine — only to discover later 
that it looks terrible in a different browser, such as Firefox or Safari. 



Tasks Performed 
in This Chapter 

^Testing Web pages 
in different Web 
browsers 

Using the 

Dreamweaver link- 
testing features 

j> Publishing a site 
with Web server 

i> Using the 

Dreamweaver FTP 
features 
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There are many reasons why Web pages can look different from one browser to 
another, but it boils down to this: Browsers display Web pages differently because 
HTML and other Web technologies have evolved dramatically over the years, and 
not all browser makers have designed their programs to display Web design fea- 
as HTML and CSS, in exactly the same way 



Dozens of browsers are now in use on the Web, not counting the different versions of 
each browser. For example, at the time of this writing, Internet Explorer 7 is the 
newest release from Microsoft, but a significant percentage of Web users haven't yet 
upgraded and are still using IE 6 or even earlier versions. Similarly, browser compa- 
nies such as Firefox and Safari have now created a number of versions that are still 
in use on the Web. As newer versions of these browsers are released, the way they 
display HTML and other Web technologies changes. 



Add to that the differences between Macintosh and Windows computers, which can 
also affect the way Web pages appear. For example, the same font size generally 
looks smaller on a Macintosh than on a PC, and image colors can vary from one com- 
puter to another. And, as you might imagine, the Web pages look quite different on a 
21-inch monitor than they do on a 15-inch monitor. 

The result is that the same Web page can look significantly different to the many 
people who visit a Web site. For example, Figures 9-1 and 9-2 shown here represent 
the same Web page displayed in Internet Explorer 7 and in Firefox 2. The kinds of dif- 
ferences you see in these two browsers can become even more pronounced in even 
older browsers or in monitors of different sizes. 
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Figure 9-1 : This page looks just as I intended it to in Internet Explorer, but I have to test it 

in more browsers to make sure it will look good to everyone who visits this site. 
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Figure 9-2: In Firefox, the second column falls beneath the first because the two browsers 
don't display CSS in exactly the same way. By making a few minor adjustments, 
I made the page look good in both browsers. 



This challenging aspect of Web design is at the root of many of the limitations and 
complications of creating Web sites that look good to everyone who may visit your 
pages. HTML was designed to help ensure that Web pages look good on every com- 
puter on the planet, and as a result, some of the rules of Web design may seem 
strange or limiting at first. Despite these efforts and a growing movement toward 
more standardized Web development, getting your pages to look exactly the same 
on every computer on the planet is difficult to impossible. As a result, most design- 
ers create pages that look as good as possible on as many browsers as they consider 
important, even if the same pages don't look exactly the same on all browsers. 

Which browsers you should design for depends on your audience. If you have the 
luxury of having accurate reports on the visitors to your site, you can see a list of all 
of the browsers used by visitors to your site. (You can find in Chapter 14 two excel- 
lent Web-statistic services that include browser-usage information.) For example, 
your Web statistics may reveal that 40 percent of your audience uses IE 7; 20 percent 
uses IE 6; 5 percent uses IE 5; 30 percent uses Firefox; and 5 percent uses Safari. With 
those numbers in mind, you may decide that your pages should look attractive in 
Internet Explorer 6 and 7 and Firefox but settle for them not looking quite as good in 
Safari and older versions of IE, which display some features quite differently. 

Entire books and Web sites are dedicated to the differences among browsers, and 
how to best design for everyone on the Web. To help keep things simpler for you, I 
include templates in this book that are designed to look best in the most-recent and 
most-commonly used browsers on the Web, including Internet Explorer 5 and 6, and 
Firefox 1 and 2. However, you should note that making significant changes to these 
designs may result in unpredictable results, which is another important reason to 
test your work thoroughly before you publish your site. 
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Previewing Web Pages in Multiple Browsers 




Toolbox: 

Adobe Dreamweaver 
Microsoft Internet 
Explorer 
Mozilla Firefox 
Safari or another Web 
browser 

Completed Web pages 

Time needed: 

Less than half an 
hour 




Previewing your Web pages in a variety of Web browsers is the simplest 
way to make sure that they look suitable to most of your visitors. The 
following task walks you through the process of adding browsers to 
Dreamweaver for easy previewing and for viewing the same Web page 
in multiple browsers. 
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/. Open a Web page that you want to preview 
in Dreamweaver, choose FileOPreview in 
Browser, and select a Web browser from the 
list of browser options. (You find out how 
to add more browsers to this list in Steps 3 
and 6.) 
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2. Study the page carefully, and test links, 

rollovers, and any other special effects to make 
sure that the page appears the way you want in 
the Web browser. 
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3- Return to Dreamweaver to make any changes 
you want to the page and to test the same page 
in other Web browsers. To add browsers to the 
preview list, choose FileOPreview in Browser 
and then select Edit Browser List. 



4- In the (Preview in Browser) Preferences dialog 
box, click the plus (+) sign at the top of the 
dialog box to open the Add Browser dialog box. 
Enter a name for the browser. (I like to include 
the version number as well as the name, as 
I have here, with Firefox 2.) Click the Browse 
button. 
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5. 



Find on your hard drive the browser you want 
to add, click to select it, and then click Open 
to add it to the browser list in Dreamweaver. 
Note that you can only add browsers to 
Dreamweaver that are on your hard drive. 
(See the nearby sidebar "Downloading new 
browsers" to find out more about finding and 
downloading new browsers for testing.) 



6. Repeat Steps 3 through 5 to add more browsers 
to the list. You can then designate which 
browser you want as your primary browser, the 
browser that will be launched when the F12 key 
is first pressed. Note that you can also desig- 
nate a secondary browser, which appears 
second on the list and will launch and display 
the same Web page if you press the F12 key 
twice. 
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7- You can also preview a page in a 
browser by clicking the 
Preview/Debug in Browser icon (it 
looks like a globe), at the top of the 
workspace, and selecting any 
browser from the list. 




5. In addition to any browsers you 
add to the preview list, note that 
you can choose to preview your 
pages in Dreamweaver's Device 
Central, which emulates a variety of 
cellphones and other handheld 
devices. Device Central is a new 
feature in Dreamweaver version 
CS3. (You don't have this option if 
you're using an older version of 
Dreamweaver.) You can preview 
the same page in many different 
devices by first clicking the plus 
sign next to the device type and 
then any of the devices listed 
within each group. 
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Downloading new) browsers 



How do you put new browsers on your hard 
drive so that you can preview your pages 
with them? The simplest way to get the 
latest versions is to visit the Web sites of the 
companies that create the most popular 
browsers: 



Microsoft Internet Explorer: 

microsoft . com/ie 



www . 



Mozilla Firefox: www. f iref ox . com 

Apple Safari (Mac only): www.apple.com/ 
safari 

For older browser versions and more 
obscure browsers, check out http:// 
browsers . evolt . org/, a browser archive 
created and maintained especially for Web 
designers. 
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Using the breamWeatfeY Link Testing Features 
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Toolbox: 

j> Adobe Dreamweaver 
v A Web site with linked 
pages 

Time needed: 

About half an hour 




Test, test, and test some more. To help you ensure that all the bells and 
whistles on your Web site ring and ding the way they should, a variety of 
Dreamweaver features makes it easy to test your pages for broken links and 
other potential problems. In the task that follows, you find instructions for 
using some of these high-powered testing tools on a completed Web page. 



/« Make sure that the site you want to test is selected and active 
in the Files panel. If you haven't yet completed the site setup 
process, see Chapter 5 to take care of this important initial step. 
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2. To test the links in a Web site, choose 
SiteOCheck Links Sitewide. (Note that no 
page in the Web site has to open for this 
feature to work.) 
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3- The report from the Check Links 
feature is displayed at the bottom 
of the workspace. If Dreamweaver 
reports a broken link, like the one 
shown here (to the file cry . html), 
double-click the filename, and 
Dreamweaver highlights the corre- 
sponding text or image with the 
broken link so that you can easily 
see where you need to fix the link. 



4- You can fix broken links in a number 
of ways; the simplest is to reset the 
link by following the same steps you 
find in Chapter 5 for creating links. 
In the example shown here, where 
I'm fixing a link from one page in a 
Web site to another page in the 
same site (an internal link), start 
by making sure that the linked text 
is selected and then use the Browse 
button (the yellow file folder next 
to the Link field) in the Property 
inspector to locate the correct 
filename. 
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5. Use the Show drop-down list shown 
here to view all the orphaned files 
in a site. Orphaned files are HTML 
files that aren't linked or images 
and multimedia files that aren't 
inserted into any page. You also 
display a list of external links (links 
to sites outside this site) so that 
you can test them to make sure 
that the Web site address hasn't 
changed. Note that external links 
can be checked only when a page 
is previewed in a browser on a 
computer with an active Internet 
connection. 
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Setting Up FTP in DreamWeaver 




is 



Toolbox: 

Adobe Dreamweaver 
A Web site ready to be 
published 

A Web server or hosting 
service 



Time needed: 

About half an hour 




Okay, you created a Web site and tested it, and you're ready to upload it to 
the Web. It's time to put the Dreamweaver publishing tools to work. If 
you're using a commercial service provider, you most likely need the 
Dreamweaver FTP features, covered in detail in this task and the remaining 
tasks in this chapter. 

Note that you must complete the site-setup process, covered in the begin- 
ning of Chapter 5, before you can configure the site for uploading. You also 
need the following information from your Web hosting service (find tips for 
choosing a Web host in Chapter 2): 

The FTP host name 

The path to the Web directory (optional but useful, and 
should look similar to this: /web/htdocs/ jcwarner) 

An FTP login or user name 

An FTP password 

After you gather all your FTP information and complete the site setup, 
you're ready to access the Dreamweaver publishing tools and prepare the 
program to upload your Web site. In this task, you set up Dreamweaver to 
connect to your server via FTP, a process you need to do only once for 
each site you work on. In the next task, you use Dreamweaver to upload 
pages to your server by using the connection you establish in this task. 
Follow these steps: 



7. Choose SiteOManage Sites to open the Manage Sites dialog box. 
Alternatively, you can choose Manage Sites from the bottom of the 
Site drop-down list in the Files Panel, as shown in this figure. 



▼ Files 
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Manage Sites 





California Nature 5ite 
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Family 5lide 5how 
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olves 



Hard News Inc 
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Done 



New... 



Edit... 



k 



Dup_licate 



Remove 



Export... 



Import... 



Help 



2. In the list of defined sites, select the site you want to 
publish and then click the Edit button. 



3. Select the Advanced tab from the top of the Site 
Definition dialog box, and then select the Remote 
Info category from the left side. 



Site Definition for Gray Wolves 
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Remote Info 








Access: 


None 




None 


FTP 


Local/Network |\ 

WebDAV 

RD5 

Microsoft® Visual 5ource5afe® 









4- Click the drop-down arrow to the right of the 
Access box, and then select the publishing 
option best suited to your Web server and 
development environment. If you're using a 
commercial Web host (the most common 
option for small do-it-yourself sites), choose 
FTP. If you're working at a university, a large 
company, or an organization that has its own 
Web servers, refer to the nearby sidebar, "The 
multiple Dreamweaver publishing options," to 
understand your choices here, and check with 
your system administrator to find out which 
option is best for your system. 
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Remote Info 



Drop Books 

FTP host: ftp.digitalfarnily.com 



Host directory: /web/digitalfamily 



Login: family 



Test 



Password: 



] Use passive FTP 



Save 



In the FTP Host text box, type the host name 
of your Web server. In my example, I used 
ftp . digitalf amily . com. In the Host 
Directory text box, type the directory on the 
remote site in which documents visible to 
the public are stored. In my example, I used 
/web/digitalf amily/. The information you 
enter in this field depends on your server. In 
some cases, you can leave the field blank if you 
log in directly to your site; in other cases, you 
use a different path, such as users /mysite/ 
domain. Check with your service provider or 
site administrator to find out how your server 
is set up. 



6. Enter your login name and password. Web services require a username 
and password to gain access to your Web server, to ensure that you're 
the only person who can make changes to your Web site. If you select 
the Save check box, Dreamweaver stores the information on your local 
computer and you don't have to retype it every time you log in to your 
Web server. Click the Test button to make sure that you entered every- 
thing correctly. If there are no problems, Dreamweaver responds with 
the message Adobe Dreamweaver CS3 connected to your Web 
server successfully. 



7. Select the Use Passive FTP option or the Use 
Firewall option only if your service provider or 
site administrator instructs you to do so. If you 
a use a commercial Web-hosting service, you 
shouldn't need to select any remaining options 
in this section of the dialog box. Select Use 
Secure FTP if you have a secure Web server, 
but be aware that not all hosts support secure 
FTP. If you select this option and see an error 
message when you press the Test button, dese- 
lect the option and test again. 



I I Use passive FTP 

[ I Use IPv6 transfer mode 

I I Use firewall 

□ Use Secure FTP (SFTP) 



Server Compatibility,. . . 



Firewall Settings... 




If you try to connect to your server and see the message "An FTP error occurred," it usually means that you 
entered characters incorrectly. Be very careful as you type your username, password, and other information, 
because most servers are case sensitive and require that these fields be filled in with the exact host, directory, 
login, and password information. If you still have trouble, contact your service provider or site administrator to 
ensure that you have all the correct information for connecting to your server. Setting up all this information cor- 
rectly the first time can be tricky, and each service provider is different. 
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Dro pBooks 



0 Maintain synchronization information 
O Automatically upload files to server on save 
] Enable file check in and check out 



OK 



Cancel 



Help 



5. Click to select the Maintain Synchronization 
Information check box; Dreamweaver then 
automatically keeps track of any changes you 
make to pages on your local computer that 
haven't been uploaded to the server. Note: 
I never recommend that you select the 
Automatically Upload Files to Server on Save 
check box because I think that you should test 
your pages on your local computer before you 
publish them to the local site. Leaving this box 
deselected prevents the possibility of acciden- 
tally uploading errors automatically every time 
you save a page on your local computer. The 
Enable File Check In and Check Out option 
opens an advanced feature that can be used to 
track files when multiple people are working on 
a Web site. You can find more information on 
this and other site-management features in my 
book Dreamweaver CS3 For Dummies (Wiley 
Publishing). 



9* Click OK to save your Web server information settings and close 
the Site Definition dialog box. You're ready to start using the 
Dreamweaver FTP features, covered in the next section. 



The muitipie Dream uteat/er publishing options 



In the Remote Info category of the Site 
Definition dialog box, you find five options 
when you click the Access drop-down list. 
The following list briefly describes when 
you should select each choice. (If you're 
using a commercial Web-hosting service, 
the FTP option should be your best choice.) 

is None: When you aren't uploading your 
site to a server or when you aren't yet 
ready to fill in these settings. 

V FTP: When you're using the built-in 
Dreamweaver FileTransfer Protocol fea- 
tures, which are covered in detail in the 
following section. You're most likely to 
need these settings if you're using a 
commercial Web-hosting service. 



Local/Network: When you're using a 
Web server on a local network, such as 
your company or university server. For 
specific settings and requirements, check 
with your system administrator. 

w WebDAV (Web-based Distributed 
Authoring and Versioning): When you're 
using a server with the WebDAV proto- 
col, such as Microsoft IIS. 

RDS (Remote Development Services): 

When you're using ColdFusion on a 
remote server. 

is Microsoft Visual SourceSafe: When you're 
using Microsoft Visual Source Safe. (This 
option is available only in Windows.) 
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Upioadinq Flies With the DreamWeaver 




stuff you 

Need to Knout 



Toolbox: 

j> Adobe Dreamweaver 
A Web site with linked 
pages 

Access to a Web server 

Time needed: 

About half an hour 




After you enter all your Web server and login information into Dreamweaver 
(as you do in the previous task), you can upload files to your server and 
retrieve them at any time by using the built-in FTP capabilities of 
Dreamweaver. 

To transfer files between your hard drive and a remote server, follow these 
steps: 



▼ Files 



Files 



Assets | Snippets 



The Gray Wolf 



Local view 



LocalTiles 



E ^ Site - The Gray Wolf (C:\Docurnen. . . 

El -lSj ess 
EE--(3) images 

EE mj pages 

resources 
habitat.html 
history.html 
howl, html 
index.html 



7. Make sure that the site you want to 
upload is selected and visible in the 
Files panel and that you entered all 
the FTP settings described in the pre- 
vious section. Then, in the upper-left 
corner of the Files panel, click the 
Connects to Remote Host icon. (It 
looks like a plug and an outlet.) 




If you're not already connected to the Internet, the Connects to Remote Host icon attempts to start your Internet 
connection. If you have trouble connecting this way, try establishing your Internet connection as usual to check 
e-mail or surf the Web, and then return to Dreamweaver and click the Connects to Remote Host icon after estab- 
lishing your Internet connection. When your computer is online, Dreamweaver should have no trouble automati- 
cally establishing an FTP connection with your host server. 
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Files 1 
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Remote view v 
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2. When the connection is established, the blue Connects 
to Remote Host icon changes to look like the plugs are 
connected (or, dare I say, plugged in). After the connec- 
tion is established, you can view the files and folders on 
your Web server by choosing Remote View from the 
drop-down list in the upper-right corner. (It's shown 
open in this figure.) Using the drop-down arrow, you can 
easily switch between Local view, which displays the 
files and folders in the root site folder on your local hard 
drive, and Remote view, by selecting each one in turn. 



3- To see both Local and Remote views 
simultaneously, expand the Files 
panel by clicking the Expand icon, 
in the upper-right corner of the Files 
panel. With the panel expanded, you 
can upload and download files by 
dragging them from one pane to the 
other. To minimize the Files panel, 
click the same icon again. In this 
figure, the Files panel is expanded 
and the cursor is hovering over the 
icon, which is labeled Collapse 
when the Files panel is expanded. 
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4- To upload a file (transfer a file from 
your hard drive to your Web 
server), select the file from the 
Local View panel (which displays 
the files on your hard drive) and 
click the Put Files icon (the up 
arrow) in the Files panel. If a dialog 
box appears with the message Put 
dependent files, choose No, to 
upload only the selected file. 
Choose Yes, and Dreamweaver 
uploads the selected file, plus any 
files that appear within that file, 
such as images or multimedia files 
that are inserted into a page. 
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Files are copied to your server 
when you transfer them, leaving 
the file on the local computer 
untouched. You can select multiple 
files or folders to be transferred 
simultaneously 



6. To download files or folders (trans- 
fer files or folders from your Web 
server to your hard drive), select 
the files or folders from the Remote 
Site panel (which displays the files 
on your server) and click the Get 
Files button (the down arrow) in 
the Files panel. The files are auto- 
matically copied to your hard drive 
when you transfer them. 
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When you copy files to or from your server, the files you're transferring overwrite the files already at the destina- 
tion. Dreamweaver notifies you about the overwriting if it notices that you're replacing a newer version of a file 
with an old one, but it's always a good idea to double-check before you overwrite a file. 




After you upload files to your server, test your work by using a Web browser to view the pages online. Sometimes, 
things that look and work fine on your computer don't work on the server, so you should always test the pages 
on the server right away. 




Using dedicated FTP programs 



If you prefer to use a dedicated FTP program 
rather than the built-in Dreamweaver fea- 
tures, you can download one of these pop- 
ular FTP programs for the Mac or PC: 

v 0 FireFTP: A Firefox add-on that you can 
download for free from fireftp. 
mozdev . org. 

WS_FTP: On a PC, you can find this 
program with the unusual name at 

www . ipswitch . com. 



CuteFTP: Download this Windows pro- 
gram from www . cutef tp . com. 

V Fetch: If you use a Macintosh computer, 
check out this program, available at 

www. f etchsof tworks . com. 

v 0 Transmit: You can download this pro- 
gram, also for the Mac, at www. panic . 
com/ transmit. 
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Synchronizing Local and Remote Sites 



Si 
Nee, 




Toolbox: 

Adobe Dreamweaver 
A Web site with linked 
pages 

Access to a Web server 

Time needed: 

About half an hour 




One of the most valuable features in the Dreamweaver FTP options is the 
capability to automatically synchronize the files on your hard drive with 
the files on your Web server. This feature is cool because it helps you keep 
track of which pages you edited and ensures that they were updated on the 
server. 

This feature may not matter much to you the first time you upload your 
site, or if you have only a few pages in your site, but if you have a large site 
and make frequent updates, this feature is a wonderful way to ensure that 
all your changes reach your server. You can easily forget a file when you're 
making several updates at once. Dreamweaver also confirms which files are 
updated after you complete the synchronization. 

Follow these steps to synchronize your Web site: 



7. Make sure that the site you want to work on is selected 
in the Files panel and connected to the server. (See the 
previous two tasks for instructions on these preliminary 
steps.) Click the Expand/Collapse icon to enlarge the 
Files panel and view the remote and local sites simulta- 
neously. (To minimize the Files panel, click the Expand/ 
Collapse icon again.) 
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Synchronize Files 
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Preview. . . 



Cancel 



Help 
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C^Delete remote files not on local drive 



3- Make sure that the Delete Remote Files Not 
on Local Drive check box is deselected. Be 
careful: I generally recommend that you leave 
this check box deselected because you may 
have folders and files on the server, such as 
log files or program files that don't exist on 
your hard drive, that you don't want to 
delete inadvertently 



Synchronize 



Ftes: 1 wl be updated 



U Show ail files 

To change on ocbon, select o He ond dkk one of the icons below before etching OK. 



Choose SiteOSynchronize or click the 
Synchronize icon (the double-headed circular 
blue arrow), and the Synchronize Files dialog 
box opens. In the Synchronize drop-down list, 
choose either the Entire Site or Selected Files 
Only option. In the Direction drop-down list, 
choose which option you want to use to copy 
the files. This list describes the options: 

Put Newer Files to Remote: Copies the most 
recently modified files from your local site to 
the remote site. Select the Delete Remote Files 
Not on Local Drive check box if you want those 
files removed from your Web site. 

Get Newer Files from Remote: Copies the most 
recently modified files from your remote site to 
the local site. Select the Delete Local Files Not 
on Remote Server check box if you want to 
remove those files from your local copy. 

Get and Put Newer Files: Updates both the local 
and remote sites with the most recent versions 
of all the files and folders. 
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4- Click the Preview button, and 
Dreamweaver automatically com- 
pares the files on your local hard 
drive with the ones on the remote 
server. When the comparison is 
complete (it can take several sec- 
onds), the Synchronize dialog box 
displays any files that Dreamweaver 
has identified and indicates whether 
they need to be uploaded or down- 
loaded (in keeping with the options 
you specified in Step 3). Use the 
icons in the lower-left corner of this 
dialog box to change any of the pro- 
posed Dreamweaver actions. Click 
OK, and Dreamweaver automatically 
transfers files and then updates the 
Synchronize dialog box with the 
status of the process. 
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"As a "Web site designer I never -thought I'd 
say this, but I don't think xjour site has 
enough bells and thistles/ 



Chapter 1 0 

DropBooks Designing a Blog 



B logging is a hot technology. All the fanciest Web sites are 
parading around in permalinks and comments, and for good 
reason: Blogs have proven to be exceptionally successful at gener- 
ating interest and traffic to a Web site, and in making interesting 
connections with readers. 

All kinds of people are choosing to start a blog, too. No matter what 
you read in the newspaper, blogs are being created by more than 
just teenagers. Top-level executives at General Motors are using a 
blog to connect vice presidents with buyers of Chevy Camaros (visit 
f astlane . gmblogs . com). Staff members of Mani's Bakery in Los 
Angeles keep their customers up-to-date on the latest soup specials 
with their blog at www . manisbakery . com. Smart and funny indi- 
vidual bloggers have readers they have never met — check out Joey Devilla's mus- 
ings on his blog, The Adventures of Accordion Guy in the Twenty-First Century 
(j oeydevilla . com). 

For all the talk about blogs, the word blog is about as clear as mud, so perhaps a defi- 
nition is in order. A blog (short for Web log) is a collection of writings or multimedia 
content, displayed in reverse chronological order, sorted by category and date, that 
offers readers the ability to leave comments for the writer or for other readers. Blogs 
are essentially a flavor of Web site, but one that's quite standardized in the way it's 
presented, and used by all kinds of people to discuss an amazing range of topics. 

Blogs are a useful way to encourage dialogue on your Web site and to build commu- 
nity. (It's a hot topic in today's Web 2.0 world.) Most Web site owners love the idea of 
creating a group of loyal visitors, and I would bet you're no different! This chapter 
shows you the options that are available if you want to blog, by focusing on using a 
popular and free service from Blogger.com. You find out how to set up your account, 
post entries, customize the blog's look and feel, and even integrate your blog 
directly into your Web site. 



Tasks Performed 
in This Chapter 

Starting a blog with 
Blogger.com 

^ Writing and styling 
posts with panache 

Making the most of 
your blog template 

Putting your blog on 
your own Web site 
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Starting a Btoq at Btoqqerxom 



Sx 
Nee, 




Toolbox: 

^ An updated Web 
browser, such as 
Internet Explorer 7.0 or 
Firefox 2.0 
An e-mail address 



Time needed: 




Less than half an 
hour 



Your blogging software options are as numerous as the function keys at the 
top of your keyboard, so how do you choose one service over another — 
or know what they do in the first place? Although I can't help you with your 
function keys, blogging software is another matter: One of the quickest and 
most flexible services is available at Blogger.com. Blogger's free and robust 
blogging tool includes some nice bells and whistles. You can sign up and 
get started very quickly. 

If you aren't sure that you want to blog or you're thinking of using other 
software down the road (or you're just curious), Blogger.com is also an 
excellent place to become familiar with how blogging software works. 

In this step-by-step task, you can see how easy it is to sign up for a blog and 
get started: 




7. 



Open your Web browser, point it to www . 
blogger . com, and click the Create Your Blog 
Now button. 
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2. 



Type your e-mail address in the Email Address 
field, and then type it again in the Retype Email 
Address field. Type a password in the Enter a 
Password field, and then type it again in the 
Retype Password field to confirm it. The 
password-strength indicator tells you how 
secure your password is — that is, how easily 
someone else might be able to guess it. Click 
the Password Strength link to read about 
making your password harder for others to 
figure out. 
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3. 
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When you post to your blog, your name 
appears as the author of your writing. Type 
your name, or the name you want to use on 
your blog, in the Display Name field. You can 
change this name later, if necessary. 
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In the Word Verification field, type the funny- 
looking letters you see. The Word verification 
technique is used on many Web forms to 
ure that f human, rather than a computer 

the form. Many spammers 
out Web forms in order to 
display spam messages on blogs or send them 
by e-mail. 
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5. Click to select the Terms of Service check box, 
to indicate your compliance with the Blogger 
terms of service, and then click Continue. You 
should always know what you're agreeing to, 
so click the Terms of Service link to read the 
Blogger rules. After you click Continue, the 
screen that allows you to name your blog loads. 



6. Give your blog a name in the Blog Title field. 
Blog names are generally short and catchy. The 
key is to make it memorable for readers. If you 
aren't sure yet what to name your blog, don't 
worry: You can change the name later. 
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7. Choose the URL (Web address) for your blog 
and type it in the Blog Address field. Click the 
Check Availability link to see whether the blog 
address you want to use is available; Blogger 
suggests alternatives if the name you want to 
use is taken. 



5. In the Word Verification field, type — again! — 
the funny-looking letters you see. (Those spam- 
mers are persistent.) When you're done, click 
the Continue button to display the final setup 
screen, where you choose a template for your 
blog. 
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9* Scroll through the available designs to find one 
that appeals to you. When you find one, click to 
select the radio button below it and then click 
Continue. If you want to see a bigger version of 
the template, click the Preview Template link 
below the thumbnail version you're interested 
in. A larger version of the template opens in a 
separate window. Simply close the window 
when you're finished. You can change your tem- 
plate later, if necessary. After you sign up for a 
blog, you're ready to start posting. See the next 
task for details. 
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Slogging software options 

ely about Blogger in this chap- 
v^ffUf i^i^Dy no means the only, or even 
the best, blogging solution out there. If a 
blog is an important part of yourWeb plans, 
spend some time researching the available 
solutions to find the one that fits both your 
plans and your pocketbook. 

Because Blogger is hosted blog software, 
you use its Web servers to publish and store 
your blog. Some software packages, how- 
ever, can be installed directly on your own 
Web server, giving you more control and 
better ability to customize. Hosted solutions 
are fast and easy to use, and installed solu- 
tions offer more features and better control. 

Here are two other hosted solutions you can 
take a look at: 

TypePad, at www.typepad.com, has three 
pricing levels, depending on the level of 
functionality you want, and it's proving to be 
the platform of choice for busy profession- 
als who want the convenience of a hosted 
service with more support and a larger fea- 
ture set. 

WordPress is a recent addition to the hosted 
software family. Like Blogger, it's free, and 
although it's quite easy to use, it doesn't yet 
have the level of template customization 
that Blogger offers. Sign up for WordPress 
at www . wordpress . com. 

If you want to install software on your own 
Web server, here's a description of the major 
players: 



MovableType is the granddaddy of blogging 
software, the gold standard to which all 
others are compared. It has tons of helpful 
features, and if you develop the proper 
skills, you can make this software jump 
through hoops for you. Check it out at 
www . movable type . com. 

WordPress is the one that lots of bloggers 
swear by (the version you can install on 
your own server as opposed to the hosted 
version). They point out that you can't beat 
the features it offers for the price. This soft- 
ware is free. It's open source, so if you want 
to dig into the guts of your code, this 
excellent choice is available at www. word 

press . org. 

ExpressionEngine has its roots in blogging 
software but is evolving into a fully featured 
content-management system with excellent 
blogging tools. Throw in extras like photo 
galleries, shopping cart modules, forums, 
polls, and more, and you can use this prod- 
uct to run your blog andthe rest of your Web 
site. It's at www . expressionengine . com. 

I mention only six blogging options here, 
but you can check out dozens, including 
many on social networking sites like 
MySpace.Take a good look at your options 
as you make your decision to find just the 
right set of features for your situation. 




Blogger is part of the family of Web services made available by Google. If you have an account with another 
Google application, like Gmail, you can use it when you sign up for Blogger. If you have a Google account and 
Blogger recognizes that you do, some of the fields mentioned in these steps are already filled out for you. If you 
sign in with a Google account, start with Step 6 to create a blog. 
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Posting to \lour Btoa 




Toolbox: 

w An updated Web 
browser, such as 
Internet Explorer 7.0 or 
Firefox2.0 

A blog on Blogger.com 



Time needed: 

Less than half an 
hour (unless 
you're a slow 
writer!) 




Updates to your blog are usually called posts, or entries. Blog posts are gen- 
erally short (although they don't have to be) and can be composed directly 
in the blogging software or written in more traditional word processing 
software and then pasted into the composition window. (For advice on cre- 
ating a readable, interesting blog post, read the following sidebar, "Writing 
for your blog.") 

Nearly all blogging software works similarly to word processing software, 
or even e-mail software. After typing an entry, you can use handy icons in 
the publishing interface to create text styles. Blog software also has icons 
you can click to accomplish simple HTML tasks, like inserting links. 

Creating a new post is easy to do. In fact, if you can write an e-mail mes- 
sage, you can write a blog post! Follow these steps: 



/. Log in to your blog at www . blogger . com. You 
can have multiple blogs at the same time with 
Blogger. When you log in to your account, all 
your blogs are visible in the Dashboard, and 
each blog you write has a New Post link. Click 
the New Post link below the name of the blog 
you're updating, to open the Posting tab for that 
blog. 
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2. Type a title for your blog post in the 
Title field. Type the text of your 
blog post on the Compose tab, 
using the formatting icons to 
choose fonts, create lists and links, 
and create other layout styles. To 
apply formatting to the text, first 
select the text you want to affect, 
and then click the icon for the style 
you want to apply. You can choose 
font options, bold, italics, text 
color, text alignment, bulleted or 
numbered lists, and more. 
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3- To add a link, first select the text that you want 
readers to click to find the link. Then simply 
click the Link icon (the globe with a link of 
chain on top of it) and paste the Web address 
for the link into the URL window that opens. 
Don't forget that you need to use the full URL, 
including the http : / / part, to create a work- 
ing link. 



4- To insert an image into your blog entry, click 
the Add Image icon (it looks like a tiny picture 
of a mountain) to open the Upload Images 
window. You can choose from a handful of 
methods. (To find out how to prepare images 
for use on the Web, read Chapter 4.) You can 
either choose an image on your computer and 
upload it or provide the Web address (URL) for 
an image that is on another Web site. Either 
way, Blogger also lets you choose a layout and 
an image size. 
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5. You can also add labels to your blog post. Labels, or keywords 
that describe the blog post, are used by search engines to 
better sort your content into search result listings. To add a 
label, simply type it in the Labels for This Post box, in the 
lower-right corner of the window. 
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6. Click the Check Spelling icon (it looks like a 
check mark on top of the letters ABC) to high- 
light in yellow all spelling errors in your blog 
post. Click any error to select from a list of 
corrections. 
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7. Before you post your entry click 
the Preview link, in the upper-right 
corner, to see how your chosen 
styles look. You can return to 
Editing mode by clicking Hide 
Preview. If you decide, after pre- 
viewing, to remove formatting, 
simply highlight any element with a 
style you want to remove and click 
the Remove Formatting icon. 
(It looks like an eraser.) 
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5. Click the Post Options link, on the left, to set 
the date and time of your post, and to turn 
commenting on or off. For most blog posts, you 
should leave comments turned on. 
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Your blog post published successfully! 

View Blog (in anew window) 



Need to change It? Edn po;i I Create a new post 



9* When everything looks right, click the Publish 
Post button. The system then confirms that 
your post has been published. If you want to 
save your post as a draft for later, you can 
click Save rather than Publish. (Lots of blog- 
gers do this in order to have material prepared 
ahead of time or just to have the chance to 
read things over one more time.) Blogger also 
saves your work automatically every few min- 
utes, so if the Save button says Saved, you 
already have a draft version. After you publish 
your post, click the View Blog link to ensure 
that your post was published successfully and 
looks the way you want. 




Chances are you discovered quite a bit of HTML in the other chapters of this book. If you feel comfortable using 
HTML, you can use it right in the blog post window of Blogger. (As with regular text, you can write HTML 
directly in the window, or create your code in another application and copy and paste it into the blog post 
window.) If you want to use code, click the Edit Html tab of the composition window to switch modes. 
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Writing for your blog 



3!<|{J\m/5^generally conversational and 
fo*ml\lWtone and style. You should 
address the reader directly, to play up this 
aspect of blogging, almost as though you're 
talking to a good friend on the phone or 
writing an e-mail message. 

I don't mean that you have to throw out the 
rules of grammar and spelling, although 
many bloggers do so. You'll find that many 
readers appreciate carefully crafted sen- 
tences when they read blogs as much as 
they do when they read books. Why make 
yourself hard to understand? 

Many writing coaches say that being rigor- 
ous about spelling and grammar is a good 
way to sharpen your thinking. And, of 
course, it's true — the more attention to pay 
to writing well, the better your results, even 
if you're just blogging about the terrific play 
you saw last night. 

For a helpful example of a writing style 
that works well on a blog, visit the site 
named "The Pioneer Woman Cooks!" 
(www.thepioneerwomancooks.com), a 
blog that's entertaining and informative. 
This excerpt from Ree's blog (she's a self- 
proclaimed "desperate housewife") hits just 



the right combination of casual good humor 
and well-crafted thought: 

Sigh. Tiramisu. The first time I tried it was 
back when I lived in L.A., and it happened to 
also be the first time I tried risotto. I was 
having dinner with my LA. boss, her boss 
from Connecticut and my four other cowork- 
ers. The risotto experience was triumphant 
enough — the creamy al dente deliciousness 
of each bite just about did me in. But then the 
Connecticut boss took the liberty of ordering 
a round of Tiramisu for the table . . . and my 
life has never been the same. I mean that 
too. It changed instantly and was forever 
altered. But in a really good way. 

Incidentally, Ree does more than write in her 
blog posts: Each recipe that she posts is 
extensively illustrated with photographs of 
every step (sort of like this book!). Don't 
forget that blogging doesn't have to mean 
all writing, all the time. Many terrific blogs 
are devoted to displaying a photograph 
every day, or to video blogging. Numerous 
others combine text, photos, audio, and 
video, which keeps them fun and interesting 
for readers — and for the blogger. 



^_ r 

fi^?C\ After your blog is up and running, you can make updates by using e-mail. Updating in this way requires one 
Lx^# c l u ' c ' < setu P ste P : From the Blogger Dashboard, click the Settings link and then click the Email link. In the Mail- 
^^^^ to-Blogger Address area, fill in the blank to create a custom e-mail address that's associated with your blog. 

Make it something easy to remember. Select the Publish check box if you want messages you send by e-mail to 
be posted automatically, and click the Save Settings button to save your changes. If you don't select the Publish 
check box, you can still send updates by e-mail — they're saved in draft form until you specify from the 
Dashboard to publish them. When setup is complete, simply type the e-mail address you just set up, choose a 
title by typing it in the Subject field, and then create a blog post in the body of your message. When you click 
Send, the message wings its way to Blogger and onto your blog. 
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Customizing \lour Blog Design 



Nee 




Toolbox: 

w An updated Web 
browser, such as 
Internet Explorer 7.0 or 
Firefox2.0 

A blog on Blogger.com 



Time needed: 

Half an hour to an 
hour 




One exciting feature of Blogger is the flexibility to tweak and customize 
the blog template. You spend a lot of time trying to make your words 
reflect your thoughts and feelings; why not make the blog itself more 
personal? 

When you started your blog, you chose a template design, but you 
don't have to keep it forever. You can change to a new template when- 
ever you feel like it, and you can tweak one of the many templates by 
changing elements such as text and link colors, adding photos, and 
even repositioning elements on the page. 

You can easily spend a lot of time tweaking colors, for example, to get 
them just right (I have spent hours trying one color and then another), 
but don't forget that the templates in the system were all designed by 
professionals. If you like what you see, you don't have to tweak! 

If you just can't resist the temptation to customize your site, here's how 
to get started: 



7. Point your Web browser to www . blogger . com, 
and click the Layout link for the blog you want 
to tweak. Blogger.com lets you have multiple 
blogs at the same time. Look for the Layout link 
associated with the blog you want to edit. 



Dashboard 








Mans« Your Blogs 


Create a RI04 | Help 




Quick and Dirty Blog Tips 

l Pui-U LM published un Jul 30, 2007 




View Bfoa A 




^ New Poll 


ft Manag 


9: Posti, Sellings Layout 



HNiijijri :: hilil I .lyiHil ■ Ma/ill.! HibIdjc 
Flit EdH View llisloiy Dnohuiiirks Toolt Htlp 



^ Q iQ hnpitfiw^.blO^garcOrVb're airanijB '■b[o.jlL'=.1[01 31 006331 1 2&G9 ' *| H [Q 



Quick and Dirty Blog Tips 



ppitiriH Setting j Temp-Lit* 



VISW 6lD[ 



FHlr HTM Pink Kl. 



Add and Arrange Pa^e Element; 

CHei nnrt rlrrrj (n nrnrrarijr pajr r>mc nf-r rir. ynur hlnj 



PKFVIFWl ClfAB Ffim 





Hnvhiif 








Quick and Wity ei*g ii|is|... 


Em 



Aitii p.>ii(* ri»Lii*iii 


Atom He 


1 .hi 




Archive 





[.III 



2. On the Template tab that opens, 
click and drag elements in the 
window to move them to a new 
position. If your blog elements don't 
look like those in Figure 10-31, don't 
worry. Different templates use dif- 
ferent elements, but they're all 
available when using the Add a 
Page Element link. 



Done 
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Done 



4- Click the Edit link in the Blog Posts 
section to change the date format, 
change the language that credits the 
author and labels comments, deter- 
mine whether to allow visitors to 
e-mail links to friends, and even 
rearrange the elements of the blog 
post itself. 
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3. 



5. 



Click any page element in the page header to 
customize the blog title, add a description, or 
include an image from your computer or from 
a Web site. 
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If you want to change how posts are 
archived, click the Edit link in the Blog 
Archive area. You can customize the archive 
element by changing its name, determining 
the style and frequency of archive organiza- 
tion, deciding how to display and order 
posts, setting the date format, previewing 
changes, or removing the page element. 
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6. The About Me area enables you to tell the 
world more about who you are by sharing 
your profile or showing your name, descrip- 
tion, and location. You can also remove the 
entire About Me element from your template. 
Again, click Edit to customize these options. 











CLEAR EDITS 









5. Click the Preview button to check 
your changes, click Clear Edits to 
undo your changes, or click Save to 
make the changes take effect on your 
blog. 
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poll to your blog. 
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Add a list of your favorite books, 
movies, or anything you like. 
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sites, blogs, or web pages. 
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Feed 

Add content from an RS5 or Atom 
feed to your blog. 
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blog. 
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Logo 

Choose from a variety of Ulogger 
logo? to add to your page. 
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Dlog Archive 
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description. 
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Automatically add current 
headlines from (Joogic Hew; to 
your blog. 
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Video Bar 

Display dips from Youl ubc and 
boogie Video for your readers to 
watch without leaving the page. 
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CANCEL 



Done 



7- Click the Add a Page Element link to select 
from several Blogger-provided whistles and 
bells: polls, lists, pictures, advertising, text, 
HTML, RSS feeds, labels, logos, headlines, 
and video clips. 




Blogger also enables you to use hexadecimal code in order to use a custom color. Hexadecimal code is a set of 
letters and numbers that correspond to red, green, and blue values. Combining these numbers and letters pro- 
duces a broad range of colors, although it takes practice to look at a hex code and understand which color it wi 
produce. Many graphics programs provide hexadecimal codes in their color pickers, so you can use them to find 
a color code to use on Blogger. Or, try generating color palettes by using the Color Schemer online Web tool, 
available at www. colorschemer . com/online . html . 
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Vlp-_ 



^ L-nk Cdor 
■ tfh'lnJ Lli*.C6br 



CiiUnq Ir-rm y\\\a hkrf 




i I'lifciri. 

■ ■I 



Cllliri Midi Mrill ll i 



■I 



ai 



■■■■■■ 



■■■■■■■■a "-«■""" 

■ ■ a a a aaa = Tjvk iriu, ^ukr. 



y« Click the Fonts and Colors link, just 
under the Template tab, to open 
the Fonts and Colors editing page. 
Select from the menu the name of 
the element you want to edit, and 
choose a color from any of the 
three available color palettes: 
Colors from Your Blog, Colors That 
Match Your Blog, or More Colors. 
You can change the colors of many 
of the text and link elements on the 
page, including the main back- 
ground color for the blog. Changes 
are displayed immediately in the 
Blog Preview pane, below the Fonts 
and Colors screen. 




10. Repeat Step 9 until your color scheme looks just right, and then click 
Save Changes to implement that color scheme on your blog. If you want 
to start over with the default template settings, click the Clear Edits 
button. For even more fun, click the Shuffle Blog Colors link, which 
keeps the same color palette but uses each color in a different way than 
the designer intended. 
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7 /. You can wipe the slate clean by 
choosing an entirely new template 
to work with: Click the Pick New 
Template link, under the Template 
tab. The available templates and 
their variations are displayed. Use 
the scroll bar to find a new tem- 
plate you like. You can preview any 
design by clicking the Preview 
Template link below the correspon- 
ding thumbnail. To view different 
variations of the same template, 
use the radio buttons below each 
thumbnail. Click the Save Template 
button to make the new template 
take effect on your blog. Warning: 
Choosing a new template wipes out 
any tweaks you made in the Fonts 
and Colors section of the Template 
tab but retains changes to the Page 
Elements section. 
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\nteqratinq a Blogger Btoq into \lour Web Site 




Toolbox: 

w An updated Web 
browser, such as 
Internet Explorer 7.0 or 
Firefox2.0 

w A Web site hosted at 
another location 
FTP account information 
for your Web host 
A blog on Blogger.com 



Time needed: 

At least one hour 




Much of this chapter describes how to use and customize a Blogger blog 
for use on the hosted Web service provided by the company. One of the 
most useful features of Blogger, however, is that you can integrate the 
pages it generates into a Web site you have on another Web server. 

If you take this route, visitors to your Web site will see your blog at your 
Web address and never need to visit the Blogger servers. If you combine 
this feature with complete customization of the blog template, no one ever 
needs to know that you use Blogger to run your blog (not that there's any- 
thing wrong with doing so!). 

This type of seamless integration takes time and technical expertise, but 
after it's set up, you don't need to do anything to maintain it, so it's well 
worth the time that's necessary to do the job right. 

There are two prerequisites to integrating your blog with an external 
Web site: 

• You must allow anyone to read your blog. In the Permissions area of 
the Settings tab, you can configure Blogger so that only invited mem- 
bers have access to your blog. By default, anyone has access to your 
blog, so unless you change these settings, you don't need to worry 
about this requirement. 

• You must use a classic template. (That's what Blogger calls it.) 



I begin with instructions for implementing the classic template: 



Dashboard 


Manage Your Blogs 


(.r«At« a Bloq | Holp 


Quick and Duty Blog Tips 


Vww Blog f3 
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>^Hmw Post 


% ( ih^ Posts. Settings Layout 



7. From the Blogger Dashboard, click the 
Settings link for the blog you want to work 
with. Because you can have multiple blogs 
at Blogger.com, be sure to choose the 
Settings link for the correct blog. 
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6 Quick and Dirty BLog Tips 
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2. Click the Publishing link on the 
Settings tab to open the Publishing 
section page. Then click the Classic 
Template link in the Hint text. 



a 



3. In the Edit HTML section of the 
Template tab that opens, scroll to 
the bottom of the page and click 
the Revert to Classic Template link. 
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Tlie page at http:/ywww.blogger.com says: 



□ 



If you revert to your Classic template, you will still be able to 
recover your current design. Click OK to revert. 




OK 



Cancel 



4- In the warning dialog box that opens, click OK to 
convert your template, or, if you have changed 
your mind, click Cancel. When the dialog box 
closes, click the Settings tab and then click the 
Publishing link to open the Publishing section 
page. 



Chapter 10: Designing a Blog 211 



Yeu'f e pubhNnf a 


n bl«f if«1 .<4iM 














tfaa pig . 




"1 ' Vff >mi i 





DropBooks 



(5. Type your server name in the FTP Server field, 
and the URL where your blog should be dis- 
played in the Blog URL field. In the FTP path 
field, type the directory path. The directory 
you're pointing to must already exist on your 
Web site. If you don't know the correct path to 
use, contact your Web host. 



5- Click the FTP link. If you prefer to connect to 
your Web host by using secure FTP (SFTP), 
obtain the proper settings from your Web host 
and choose SFTP instead. 
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7. Change the filenames used for the blog home 
page and the feed, if you prefer names that are 
different from the ones Blogger recommends. 



5. Type your FTP account username in the FTP 
Username field, and your FTP password into 
the FTP Password field. Change the settings for 
sending pings, if you prefer not do so do auto- 
matically. When you're ready, click the Save 
Settings button. 

Pings are automatic notifications that your blog 
software makes to blog search engines and 
other sites when your site is updated. To build 
traffic and keep feed subscribers current, leave 
this setting on Yes. I talk more about Web feeds 
in the "Promoting your blog" sidebar, later in 
this chapter. 
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Blogger saves your information and returns a 
confirmation message. 
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rs subscribe to the idea "If I 
'ey will come." Let me be the 
first (or not) to burst that bubble: Blogs need 
to be promoted as much as any other Web 
sites if you're trying to appeal to an audience 
that doesn't already know and love you. (Is 
it considered promotion when you e-mail 
everyone in your family to tell them about 
your blog?) 

The good news is that at a very technical 
level, the setup of blogs helps them show 
up well in search engine results. And, of 
course, search engines love sites with fresh 
content so a frequently updated blog truly 
has an edge over one that sees new content 
once in a blue moon. 

Here's a quick batch of things you should do 
to make the most of your new blog: 

Ensure that your blog has an RSS or Atom 
feed. A feed is essentially a syndication 
mechanism for your blog, a coded presen- 
tation of your updates that can be picked up 
and read by newsreaders, feed aggregators, 
and blog search engines, which in turn pass 
whatever they receive from the feed to 
humans visiting other Web sites. The result: 
eyeballs on your content and links to your 
blog. Most blog software can generate auto- 
matic feeds, but you should ensure that is 
the feature is turned on and functioning. (In 
Blogger, you can find the feed configuration 
by choosing SettingsOSite Feed.) 

Turn on trackbacks and pings. Trackbacks 
are a little hard to describe, but I'll try: 
Essentially, a trackback \s a way for blog soft- 
ware to communicate in the background 



and build links to other blogs. It goes like 
this: Blogger A posts interesting material on 
his blog. Blogger B reads that post, and has 
more to say about the same topic on her 
blog. Using the trackback URL on Blogger 
A's post, Blogger B's blog software notifies 
Blogger A's software about the new post. 
Blogger A's software then automatically 
builds, in the original post, a link to the new 
post. At the end of this (alphabet soup) 
process, Blogger A's readers see the link to 
Blogger B's post and visit her site to read it. 

Pings work similarly but are basically a 
"heads-up" notification service sent to 
some of the bigger blog search engines and 
indexers. When you let these Web sites 
know that your blog has been updated, your 
listings are included in the results that are 
displayed the next time someone performs 
a search, and again, more readers are 
directed to your site. 

Many blog software packages offer both 
trackbacks and pings, and by simply turning 
on these settings, you receive the benefit 
with little to no work each time you post to 
your blog. 

Remember that your blog posts are an 
important part of promoting yourself. Keep 
the material you write interesting and topi- 
cal. For example, if you choose to blog 
about a subject that's in the news headlines, 
you can attract readers who might never 
have visited your blog otherwise. Keep track 
of what's going on in the world, and think 
about how you can relate your topic to 
the broader context of discussion in the 
blogosphere. 




From this point on, you can continue to use Blogger to add new entries to your blog. Each time you add a new 
post, Blogger publishes it to your Web server. 
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9* Click the Republish Now link. Blogger attempts 
to make contact with your FTP server and 
place the HTML files for your blog on the 
server. If the process is successful, you receive 
a confirmation message. If the process fails, 
double-check your FTP information and try 
again. 



70. When you see the Your Blog Published 

Successfully message, click the View Blog link 
to take a look at the blog on your own Web 
server. 



Your blog published successfully. 

View Blog ( in a new window) 

/public_html/susie/atom.xml 
/public_html/susie/blog.html 
/public_html/susie/Aio//o// my- first- tip. html 
/ public_html/ susie/2007_07_01_archive .html 
/public_html/ susi9/rss.xml 



Create a new post 
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9 

Tasks Performed 
in This Chapter 

v Preparing a podcast 

v Recording a podcast 

v Editing an audio file 

Publishing a podcast 



If you haven't been hiding in a cave on Mars, you've probably 
already heard the term podcasting. It's one of the hotter Internet 
buzzwords of the past five years, and many people have scrambled 
like mad to incorporate podcasts onto Web sites. 

A podcast is any audio file stored on the Internet that can be down- 
loaded and played later on either a computer or a portable device. 

That's the technical explanation. 



In real terms, a podcast is a radio show that you can take anywhere on a portable 
device, such as an iPod, or play on any computer that's connected to the Internet. 
Podcasts are better than radio programs because you can start, stop, and rewind 
whenever you want. You can play them any time, anywhere. 

A good podcast can consist of a live interview that's available to listeners for as long 
as a Web site hosts it, a lecture by a Nobel prize-winning professor that students can 
use to help them study, or the wail of a newborn infant taking her first breaths. A 
podcast can be a long-winded blogger's rant that will be heard only by a close circle 
of fans, or a stirring national address that will be cherished by an entire nation. 

Podcasting is limited only by your imagination. As with so many other topics, a 
library of books could be filled with the bottomless depths of technical specifica- 
tions that can be involved in recording, editing, and posting a podcast. Fortunately, 
you don't need to know all that to get started. In this chapter, you find the most 
basic, cost-effective way to produce a professional-quality podcast, using free and 
easily available tools and programs. 
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fly describes some of the 
eople who are podcasting 



nowadays: 



Musicians who want to connect with fans 
and promote their bands: Some forward- 
thinking bands use podcasts to share 
excerpts from live shows, hype concert 
tours, and reward fan club members with 
exclusive content. 

Families who want to remain connected 
across distances: Recordings of a baby's 
first words, grandpa's story time, or a rau- 
cous family reunion aren't proper substi- 
tutes for being there, but they can at least 
allow people to get a flavor for what they 
missed. 

Amateur DJs and novice broadcasters who 
want to show off their skills: A tight, well- 
produced podcast can be an invaluable call- 
ing card to a beginner hoping to take the 
next step up the career ladder. 

Companies that provide training and man- 
agement updates, especially to employees 



in far-flung offices: A spoken-word explana- 
tion of the latest change in corporate strat- 
egy that shows up in employees' e-mail 
inboxes can add the kind of "human touch" 
that relaxes and reassures employees. 

Churches that make their weekly sermons 
available: Congregation members who are 
ill or traveling or who otherwise can't phys- 
ically attend church can still hear the weekly 
services. 

Bloggers who want to augment their con- 
tent: Audio clips from interviews are 
increasingly popular, as are stream-of-con- 
sciousness rants that provoke controversy 
and build up page traffic. 

Radio producers and other professionals: 

Many excellent radio programs that are now 
available online as podcasts ensure that you 
never miss your favorite show. Listening to 
professional podcasts is one of the best 
ways to get new ideas for how best to create 
your own. 



Preparing, a Podcast ■ 

Be sure to take some time before you record your podcast to plan what you want to 
say and how you want to say it. Even trained on-air personalities rarely try to make 
live, improvisational recordings. After a few minutes, an interviewer who doesn't 
have at least an outline or some good questions for a guest runs out of things to say, 
and the session can turn into a nightmare of "urn" and "uh." 

You don't have to strictly follow a script, however, and stick to every little comma 
and pause. One thing that makes listeners respond and come back for more is the 
feeling that you're talking to them rather than at them (like a late-night infomercial). 
And, one of the most difficult challenges I can imagine is to make yourself sound nat- 
ural and relaxed while giving a monologue. 

A good place to start as you plan a podcast is to think about creating a distinct 
beginning, middle, and end. A good show usually starts with some kind of introduc- 
tion of the host and any guests, moves on to the main topic, and then concludes 
with a tease to the next show you plan to produce. This outline for a music podcast 
gives you some ideas for what you might include — make your outline as detailed as 
you like: 



1. Play an introductory music clip. 
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2. Greet the audience, introduce yourself, and state the number or date of the 
podcast. 





iefly explain the theme or topic of the podcast. 
ention any guests or special announcements. 

5. Play new songs. 

6. Provide any necessary additional explanation of the theme or topic. 

7. Play more new songs. 

8. Sum up the theme or topic. 

9. Say goodbye, and "tease" the topic of the next podcast. 

Although a podcast can theoretically last for hours, in practice, large audio files 
become unwieldy very quickly. Listener patience isn't infinite, either, so unless you 
have an absolutely fanatical audience, limit your podcasts to a half-hour or less. 
Some of my favorite podcasts are only two to five minutes long, and they're designed 
so that you can listen to as many in a row as you like. If you have a ton of material, 
breaking it up into smaller chunks is definitely the way to go. 



The many Ways to record sound 



An increasing number of portable devices 
have audio-recording capabilities. Cellphones 
and Palm handhelds record audio, laptops 
have built-in microphones, and MP3 players 
either record or (like the iPod) use after- 
market add-ons. Professional radio reporters 
have long used minidisc recorders to cap- 
ture high-quality audio, whereas some old- 
school podcasters just use cables to hook 
tape recorder headphone output into their 
computers' microphone input. 

Podcasters are increasingly conducting inter- 
views or roundtable discussions using 
Internet telephone services like Skype or 
Vonage. These Voice over Internet Protocol 
(VoIP) services allow users to digitally record 
conversations without having to resort to 
recording conversations over plain old tele- 
phone lines (and entangling themselves in 
wires and iffy legal ground). 



However, because VoIP conversations are 
monaural and most listeners are used to 
high-quality stereo, podcasters are using 
workaround methods to conduct interviews 
over the phone. For example, each party to 
a conversation simultaneously records it 
into a high-quality stereo microphone. Then, 
at the end of the interview, both parties edit 
and clean up the audio, e-mail their audio 
file to each other, and then stitch together 
the files to get both (or more) sides of the 
conversation. 

Even if you can't get high-quality recordings 
of both ends of a conversation, the host 
should record into a microphone even while 
the rest of the conversation is recorded over 
a phone line orVolP connection, like Skype. 
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Recording a Podcast 



Dro 



it 

Nee, 




Toolbox: 

w Audacity (a free audio 
program available at 
http : / /audacity . 
sourcef orge . net/) 
A microphone 

i> Your own voice (and 
anyone else's you want 
to invite) 

\* A script, if you want to 
be more formal, or at 
least a good outline 



Time needed: 

Varies depending 

on how much 
material you want 
to record 




Recording an audio file can be as simple as speaking into the microphone 
on a computer headset or as complicated as setting up a dozen high-end 
microphones and a mixing board to get clean sound from every instrument 
in a chamber orchestra. Either way the basic principles I cover in this 
chapter are the same. 

Many audio professionals believe that the most important link in the chain 
is this first one: that using a bad or inappropriate microphone taints the 
audio from the get-go. The old computer industry axiom "Garbage in, 
garbage out" applies here as well. The good news is that quality micro- 
phones are more affordable than ever, and a microphone that costs less 
than $100 online or in a basic electronics store fulfills all but the most 
demanding needs. The bottom line: You can use your computer's built-in 
microphone, but a good external mic provides better sound quality. 

A simple option is to record directly into your computer — most newer 
computers come installed with a microphone port. It's usually red or pink 
and located next to the green port where you plug in the headphones. Just 
plug in a mic and follow these steps to start recording: 
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/. Launch a sound-recording program, such as Audacity, as 
shown here. You find a list of some of the more popular 
choices in the sidebar at the end of this step list. I chose 
Audacity for this chapter because it has enough features 
to empower beginners to produce decent-sounding pod- 
casts, it works on both Macintosh and Windows comput- 
ers, and it's free. (You can download it at http : / / 
audacity . sourcef orge . net / and use it to follow 
along with this task. If your copy of Audacity is a differ- 
ent version, you might see minor screen differences or 
some functions on different menus.) 
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* Audacity 
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2. Don't be overwhelmed by the mass of buttons, 
bars, menus, icons, and level meters that com- 
prise this program. In the upper-left area of the 
workspace, under the menu bar, are some famil- 
iar buttons: Skip to Start, Play, Record, Pause, 
Stop, and Fast Skip to End. If your microphone is 
ready to record, just click the red Record button 
(the one with the big red circle) and say some- 
thing into the microphone. (Sing a song, recite a 
poem, or act like you're creating your first radio 
show!) 



3- As you record, you see the sound 
represented as a spectrum across 
an audio track. Notice the two 
volume meters at the top of the 
workspace: The one on the left (the 
little speaker icon) shows the play- 
back volume; the one on the right 
(the microphone icon) shows the 
volume of the microphone you're 
using to record. Under the volume 
controls, the drop-down menu 
enables you to pick from a list of 
sources, including microphone, 
line-in, aux(iliary), CD player, or 
stereo mix. Press the Stop button 
to stop recording, or press the 
Pause button to pause. 
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Many beginners assume that louder is better when recording. Like a teenager with a new car stereo, they want 
to crank the noise to 1 1 on a scale of 1 0. But if you record with the volume set to its highest level, you get dis- 
tortion, or worse, listeners unsubscribing from your podcast feed. 
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Audio recording programs 



Drop 3ooks 



s you can use to record and 
les range from free to quite 
expensive, depending on the level of control 
you want and whether not you want to be 
able to compose original music. This list 
describes some of the most popular pro- 
grams among podcasters and audio editors: 

Audacity: This popular audio-editing pro- 
gram has more than enough features to pro- 
duce a great-sounding podcast, and it's 
available for Mac, Windows, and Linux sys- 
tems (which is why it's featured in this 
book). Audacity is free. 

GarageBand: Included on new Macintosh 
computers (OS X only), GarageBand is used 
by many podcasters who are looking for a 
quick and automated solution that's easily 
integrated with iTunes. GarageBand is free. 

Adobe Soundbooth: A more powerful and 
professional editing tool, Soundbooth comes 
bundled with other media programs in the 
Adobe CS3 suite. Soundbooth is aimed at 



people who want to be able to control a few 
aspects of their sounds but want menus 
with simple, easy-to-understand choices. 
The program costs $199 and has a free 30- 
day trial period. 

Adobe Audition: You can use this tool, 
intended for full-fledged audio engineers, to 
compose music and adjust and filter voices 
using complex and exacting processes. It 
costs $399 and has a free 30-day trial period. 

Propaganda: Propaganda is designed 
to help record and distribute podcasts. 
Although it has simplified sound-editing 
tools, you can preview your recording on 
your iPod or mobile device, and it writes the 
RSS code for you. Propaganda costs $49 
and has a free 30-day trial period. 

SnapKast: SnapKast ($79) bills itself as a 
"one-click" podcasting solution that not only 
records and edits sounds but also creates 
RSS and handles the uploading and syndi- 
cation chores. 
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4- When you're done recording, press the Play 
button to play back what you recorded. Use the 
volume controls to adjust the playback sound. 
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5- To save the recording, choose FileOSave Project 
and name it. This step saves your sound file in 
an Audacity format and preserves your record- 
ing in the best format for editing in Audacity 
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6. If you're ready to share your recording, you can 
use the Audacity Export features to save the file 
in a format suitable for the Web before you pub- 
lish your podcast. Choose FileOExport As MP3 
and name your file. To create a new file in 
Audacity, choose FileONew, and then you're 
ready to start recording again. Congratulations! 
You just took the first step toward having your 
own podcast. In the next task, you find instruc- 
tions for editing a podcast. 
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Before you begin recording, make sure that neither the computer nor the microphone is muted. This advice 
sounds simple, but even seasoned professionals can tell stories about apparently recording beautiful sounds, 
only to find (too late!) that their files contained silence. 
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Editing a Recording 
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Toolbox: 

v 0 Audacity 

A recording that can be 
opened in Audacity 

Time needed: 

A couple of hours 




In this task, you perform basic sound editing to clean up a recording. You 
don't have to use editing tools — in fact, some podcasters wear their 
rough-and-scratchy recordings as badges of honor, as proof that they're 
part of an insurgent media that rejects (what they see as) smooth, pol- 
ished, and fake corporate style. If this is your ethos, then by all means, 
don't edit your sound files. 

Most people, however, prefer to listen to recordings that don't sound like 
they were made in a gravel-sorting machine. And, if you ever venture into 
the field to do interviews or record your child's solo in the school play, 
you will probably need to fix the volume or noise level or the big, scratchy 
thud of Aunt Edna's elbow knocking the microphone off the table. 

Here are some basic sound-editing tips, to help you reduce noise in your 
recordings, cut-and-paste segments, and normalize your recordings. (You 
normalize by making the too-soft parts louder and the too-loud parts 
softer.) 



7. if your sound-recording program, such as Audacity 
(shown here) isn't open already, launch it and then 
create a recording or open an existing one. 
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I encourage you to explore beyond these simple steps — most audio programs have tutorials and Help files to 
explain what all the arcane jargon means (although if you can explain to me under which circumstances I 
would want to use a Hilbert transformer rather than a Dyson compressor and a transient mangier, I'm all ears). 
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2. To listen to the entire recording, press the Play 
button at the top of the workspace. You should 
hear your voice (or whatever you just recorded) 
playing back. Notice that every time you hear 
noise in the recording, you see a corresponding 
spike on the graph in the Audio track. 



3- To listen to a portion of the recording, click any- 
where on the recording in the audio track area 
until you see a vertical dotted line appear 
across that portion of the recording. Click the 
Play button; the recording should start from the 
location of your marker on the track. 
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4- You can rearrange or delete sections of sound 
to make a better or shorter recording. Each of 
the following steps begins with selecting part of 
the sound file. Look in the small toolbox at the 
top of the workspace. (The toolbox has six 
tools, including Zoom and Time Shift.) Click the 
Selection Tool to make it active before the next 
step. 



5- To delete a noise, such as a pause or a sneeze, 
first click and drag to select that section, and 
then press the Delete key. You can easily recog- 
nize silence in the audio track because it's rep- 
resented by a flat line in the sound spectrum 
graph. 
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To cut or copy a section of sound, click and 
drag to select the section in the audio track, 
and then choose EditOCut (or Copy). 



7. To move the sound to another part of the 

recording, click to place the cursor where you 
want to add the sound in the audio track, and 
then choose EditOPaste. The word or phrase 
that you cut out is pasted into that point in the 
recording. 
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5. To hear the results of your editing, click to 
place the cursor where you want to begin 
playback, and then click the Play button. 
Tip: To listen to only a particular section of the 
recording, click and drag to select the section 
and then click Play. You can then adjust the 
selection in the recording until you have just 
the part you want to cut, copy, or delete. 
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DropBooks 



9* One of the more commonly used options on the Effects 
menu is Normalize. When you normalize a recording, 
you balance out the highs and lows, to make the overall 
volume more consistent. 
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10. To apply an effect, you must first select the part of the 
recording you want to apply it to. Click and drag to 
select a portion of the recording, or choose EditO 
SelectOAll to select all of it, and then choose EffectsO 
Normalize. 



/ 1. In the Normalize dialog box, check both boxes for 

default normalization. Click Preview to test the sound of 
your recording, and click OK to apply the effect. 
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12. Experiment with the effects, and remember that 
you can apply them to any selected part of, or 
all of, the recording. Click Play to test your 
work, and if you don't like the results of an 
effect, just choose EditOUndo to remove it. 



226 Part III: Going Web 2.0 





File Edit View Tracks Generate Effect Analyze Help 
New Ctrl+M 

Ctrl 40 
Ct| 



Check Dependencies. 





1 1 

;>> 




5 4)1 



Open Metadata Editor 



Import... 


► 




1 Export... l 


Export Selection... « 


twport Labels... 




Cwpoi t Multiple... 




Apply Chain,.. 




tdit Lhams... 




Upload File... 


Paqe Setup... 




Print... 




Recent Files... 


► 


tMIt 


Ltrl+rj 




13. When you're done, choose FileOSave Project to save the 
recording in Audacity format, and then choose FileO 
Export and save the recording in a suitable format, such 
as MP3, before you publish your podcast to the Web. 



Getting rid of "dead air" 



Even with only the most basic understand- 
ing of audio editing, you can move a song 
from the beginning of your podcast to the 
end, or move the response to an interview 
question to the beginning, to use as a 
"teaser." 

Your goal should be to interest listeners 
immediately and then keep them interested. 
One of the best ways to do that is to delete 
all "dead air," such as pauses and other quiet 
spots. This skill is essential for producing a 
tight, efficient podcast. Remember that lis- 
teners have lives too, and if you ask them to 
wait around for a couple of minutes while 
you fumble, they will become frustrated. 



Some podcasters who are obsessed with 
deleting all the dead air between words 
review their recordings repeatedly, to shorten 
the spaces between words as much as possi- 
ble. Although it's sometimes helpful to 
remove the extra breaths and any instances 
of "urn" and "uh" between sentences, if you 
go too far, your recording sounds like you 
drank too much coffee and are babbling like 
a tobacco auctioneer. 

Try to strike a balance. You want your record- 
ings to sound natural, like a conversation 
you're having with your listeners (with all the 
boring parts cut out). Experience will gradu- 
ally teach you the sweet spot. 
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Publishing a Podcast 

How you publish your podcast depends mostly on where you plan to pub- 
lish it. Because the process of compressing and optimizing audio files and 
then setting them up for podcasting can get complicated, many sites on 
the Web are designed to help you simplify the process. 

One of the most popular sites for the podcast-publishing process is iTunes. 
When you set up an account with a site like iTunes, everything is taken 
care of for you — you simply upload your audio file on its online service, 
and you're published. 

Similarly, if you have a blog on one of the popular blogging sites, such as 
TypePad or Blogger, you find instructions and features designed to help 
you add a podcast almost as easily as you add a post. 

Find out more about creating and publishing podcasts at these online serv- 
ices and other resources: 

• Apple iTunes: (www . i tunes . com) One of the most popular podcasting 
sites on the Web, iTunes makes it easy to download and play podcasts 
from a broad range of sources, and the site makes it almost as easy to 
publish a podcast. And, you can use iTunes with a PC; you don't have 
to use a Macintosh or an iPod. 

• The Podcast Network: (www . thepodcastnetwork . com) This site fea- 
tures an international collection of podcasters, useful tutorials, and 
helpful tips and tricks about podcasting. It's an easy way to publish 
your podcast to a broad audience. 

• Podcasting Tools: (www. podcasting- too Is . com) Filled with tutori- 
als and links to audio, editing, and other types of tools, you can find 
many excellent resources on this site. 

• Podcast Alley: (www . podcast alley . com) Find a wide variety of pod- 
casts, podcast software, and instructions for creating and publishing 
podcasts at Podcast Alley. 




Toolbox: 



w A recoding that's saved 
in a format for the Web, 
such as MP3 
A connection to the 
Internet 

An account with a blog, 
Web site, or Podcasting 
service 

Time needed: 

About an hour 




228 Part III: Going Web 2.0 




Mixing in music 



ve to be a wannabe DJ to 
'in your podcast. Even if you're 
participating in hard-hitting investigative 
reporting or archiving your dad's favorite 
fishing story, music can spice up the record- 
ing and make it seem more professional. 

You can also add funny sound effects or 
snippets of dialogue from TV shows or 
old movies. Just make sure that you have 
the legal right to use any music or other 
type of recording. Type free music into 
any search engine and you'll find tons 
of places where you can download 
sound files. Here are a few to get you 
started: MP3.com, GarageBand.com, Indie 



heaven.com, Magnatune.com, Freeplay 
Music.com, and Sounddogs.com. 

You can add a music track to a sound file in 
a program like Audacity by using the Import 
feature, listed on the Project menu. Adding 
a basic audio track isn't difficult, but mana- 
ging all the format options, permissions, 
and settings can become complicated, and 
is well beyond the scope of this book. 
However you'll find many great books and 
online resources if you want to become 
more proficient in podcasting. One place 
to start is Expert Podcasting Practices For 
Dummies, by Tee Morris and Evo Terra 
(Wiley Publishing). 
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DropBookMultimedia: Adding Flash, 

Audio, and Video 



Tasks Performed 
in This Chapter 

is 0 Adding a Flash 
animation 

is Inserting Flash video 

is Comparing audio and 
video formats 

i> Uploading videos to 
YouTube 

j> Inserting a YouTube 
video into a Web 
page 



As bandwidth has grown on the Web, the use of video files 
has grown more dramatically than almost any other multi- 
media file type. From YouTube to Rewer and Odeo to small, per- 
sonal Web sites, millions of video files are being added to the Web 
every day 

You, too, can make your Web pages sing and dance by adding mul- 
timedia. If you want to provide a richer experience for your users, 
to show rather than just to tell, or to entertain as well as inform, 
adding animation and video can help you share more information 
more vividly and even make you look more professional. 



The best news is that adding animation or video isn't as hard as 
you might think. One simple way to add video to a Web page is to upload a video file 
to YouTube.com (or search for video already on YouTube) and then insert it into 
your page. You find detailed instructions in this chapter. 

You can use Dreamweaver to insert multimedia files into your pages and host the 
files on your own Web server. Dreamweaver is especially well set up for working with 
Flash animation, video, and audio files, and you find step-by-step instructions for 
working with Flash in this chapter. 



Perhaps the most complicated aspect of multimedia on the Web is choosing the best 
format for your audience, which is why you also find in this chapter a primer on 
audio and video formats. 



Playing Animation and Video on the Web 

When you add video or any other kind of multimedia to a Web site, you should know 
that your visitors may need a special player (sometimes with an associated plug-in) 
to play or view files. 
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Comparing popular Video formats 



^\ |^^^ J /Qp^t^jlP&QP to working with video on the 

\ m j [Q fj 3 ®C) s Ki& in9 the best format This list 

DrieTty describes the most common digital 
video formats and their file extensions and 
supplies a Web address where you can find 
out more about each program. 

Flash Video:The newest video format on the 
Web, and arguably the one growing fastest 
in popularity, Adobe Flash (www. adobe, 
com) helps you create Flash videos (using 
the . f lv extension). Because Flash Player 
is so commonly used on the Web, many 
developers consider Flash one of the best 
programs available. 

Windows Media Video: Defined by 
Microsoft and popular on the PC, this video 
format (.wmv, . asx) supports some of the 
strongest compression features available, 
which means that you can get faster down- 
load times. See www.microsoft.com/ 
windows / windowsmedia. 

RealVideo: RealNetworks, at www. real, 
com, designed the RealVideo file format 
( . rm, . rv) to play in RealPlayer. It's available 
for both the Mac and the PC. RealMedia pro- 
duces files suited to both low-speed and 
high-speed connections but requires special 
software on your Web server for streaming. 



QuickTime: The QuickTime player, which 
reads the .qtand .mov file extensions, is 
built into the Macintosh operating system 
and used by most Mac programs that have 
video or animation. The QuickTime format 
works well for video on the Web and 
supports streaming, but it's used primarily 
by people who favor Macs (although 
QuickTime files can be viewed on Windows 
computers with the QuickTime player). See 
www . quicktime . com. 

AVI: Created by Microsoft, the Audio Video 
Interleave, or AVI, format ( . avi) is one of the 
most common video formats on Windows 
computers, and it can play on most 
common video players. AVI works well if 
you're viewing video on a CD or on your 
hard drive, where the file doesn't have to be 
downloaded, but you can't optimize AVI files 
well for use on the Internet. If your files are 
in AVI format, you should convert them to 
one of the other formats before adding 
them to your Web site. Otherwise, you force 
visitors to download unnecessarily large 
video files. You can find more information if 
you search for AVI at www. microsoft . com. 



A player is a small program that works alone or with a Web browser to add support 
for functions, such as playing sound, video, and animation files. Some of the best- 
known multimedia players are Adobe Flash Player, Windows Media Player, 
RealNetworks RealPlayer, and Apple QuickTime. 

The challenge is that not everyone on the Web uses the same player, and viewers 
must have the correct player in order to view your multimedia files. Not all visitors 
have the time or interest to download and install a player for a multimedia file. A 
multimedia file in a format that's unsupported by a visitor's browser isn't displayed 
and might trigger confusing or irritating messages. As a result, many Web develop- 
ers help out by offering 

1^ Audio and video in two or three formats: A user can choose the format 
I that best fits the player she already has. 

1^ The same multimedia files in different file sizes: Visitors with slower con- 
nection speeds don't have to wait for large files to download. 
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1^ Information about all types of players: Visitors can download and install the 
best player if they need it in order to view files, if they're willing and able to. 




No matter which player and format you choose, however, I recommend that you 



oid the more obscure players: Unless you're offering specialized content 
that users have a good reason to download, such as a three-dimensional 
game that requires a special program to run. 

Remember that many people surf the Web in locations where unexpected 
sound can be jarring, disruptive, or worse. Always warn people in offices 
and libraries, for example, before you play video or audio, and always pro- 
vide a way to turn off the sound quickly when necessary. 

Optimize your video so that it downloads quickly and still looks good on 
the Web, no matter which player you decide to use. Optimizing multime- 
dia for the Web works much like it does with images: the smaller the file 
size, the lower the quality but the faster the file downloads. One task in this 
chapter shows you how to optimize a video with the free Flash Video 
Encoder. 



Working With Adobe Flash 

Most of the tasks in this chapter focus on techniques using the Flash Player and file 
format, but you can also upload most formats to YouTube, which is covered at the 
end of this chapter. This chapter focuses on Flash because it has clearly emerged as 
the favorite technology for creating animations and a wide variety of interactive fea- 
tures on the Web. And, with the new Flash video file, you can create all your video by 
using Flash, which is an outstanding choice because Flash Player is so popular. 

Flash files can be animations or videos; Flash Player plays both types of files. Flash 
animation files use the file extension . swf . Flash video uses the . f lv extension. In 
addition to the ability to insert Flash animations and Flash videos (created in Adobe 
Flash), you can create Flash buttons and text within Dreamweaver. 

Before you choose Flash, you should be aware of its few downsides: 

Flash might not print as you expect. 

Flash can cause accessibility problems for visitors with disabilities. 

Text included in Flash files might not be read by search engines (although 
including alternative text can help with this limitation). 

Some people deliberately block Flash files because they're often used in 
advertising. (You may want to describe what they're missing.) 
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Scripts to make Flash function better 



Drop 3 ante 



ert Flash or other multimedia 
amweaver CS3, the program 
automatically creates a JavaScript file 
that helps the file play automatically. The 
file, named AC_RunActiveContent . js, 
is stored in the Scripts folder, which 
Dreamweaver automatically creates inside 
your root site folder. The first time 
Dreamweaver creates this file, a dialog box 



alerts you that you need to upload the script 
in order for your multimedia file to work 
properly. Make sure to include this script 
(and the entire folder) when you publish 
your site on your Web server. If you don't 
include it, your multimedia file may not play 
properly, or visitors might be required to 
click the Play button twice before the file 
begins to play. 



Despite these downsides, adding a little Flash video or animation can add a lot of life 
to your site. And, if you're not designing your entire site in Flash, it's quite a safe 
format choice on the Web. 
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Inserting a Flash Animation Fite into a Web Payi 




is 



Toolbox: 

Adobe Dreamweaver 
A Flash file (available 
for download from 

DigitalFamily . 
com/diy) 

Time needed: 

About an hour 




Flash animation files are relatively easy to insert into a Web page by using 
Dreamweaver. In this section, I assume that you have a completed Flash 
animation file and that you want to add it to your Web page. To create a 
Flash file, you need Adobe Flash or a similar program that supports the 
Flash format. (If you want to know how to create Flash files, check out 
Adobe Flash CS3 For Dummies, by Ellen Finkelstein and Gurdy Leete, from 
Wiley Publishing). 

You insert a Flash file in much the same way as you insert an image file, but 
because Flash can do so much more than a still image, you choose from a 
variety of settings and options for controlling how your Flash file plays. 
Before you start, make sure to move or save the Flash file into your root 
site folder. If you prefer, you can create a subf older to store your Flash files. 

To add a Flash file to a Web site, first open an existing page or create a new 
document and save the file, and then follow these steps: 



In Dreamweaver, click to insert the cursor 
where you want the Flash file to appear on your 
Web page. 
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2. 



Select Common from the Insert bar, if it isn't 
already selected, and then from the Media drop- 
down list, choose Flash. You can also choose 
InsertOMediaOFlash from the menu. 




Because Flash is an open standard, you can create Flash files with a variety of programs, including Adobe 
Photoshop Elements, which uses the Flash format when you create Web galleries in Elements, and Adobe 
Illustrator, which has an Export to SWF option. 
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3- In the Select File dialog box, browse your hard 
drive to locate the Flash file that you want to 
insert in your page and then double-click to 
select the file. 



4- If you have accessibility options turned on, 
you're prompted to add alternative text to 
describe the Flash file. Enter a description of 
the file. Use the Tab index and Access key 
options to include a key command to start or 
control the file if you want to provide an alter- 
native to people with accessibility challenges. 
Click OK; the dialog box closes and the Flash 
file is inserted into your document. 



Object Tag Accessibility Attributes 



Title: Fish Puzzle Game 



Access hey: 



Tab index: 



If you don't want to enter this information when 
inserting objects, change the Accessibility preferences, 




Help 
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5. Dreamweaver displays Flash as a 
solid, gray box that represents the 
width and height of the Flash file. 
Click the gray box to display the 
Flash options in the Property 
inspector, at the bottom of the 
workspace. 
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6. Click the Play button in the 
Property inspector to play the 
Flash file. In this example, the Flash 
file is a puzzle game, so pressing 
the Play button displays the game 
options. (Note: When the Play 
button has been activated, the 
button text changes to Stop.} 



7. 



8. 



When the Play button is pressed, all 
features of a Flash file are activated, 
just as they would be if the file were 
displayed in a Web browser with 
the Flash plug-in. As you can see 
here, you can start the puzzle game, 
which places all puzzle pieces on 
the side of the file, and then move 
the pieces into place by clicking 
and dragging them. 



You can make a number of adjust- 
ments to the way a Flash file is dis- 
played, by changing the settings in 
the Property inspector, such as 
Loop, which replays the file if it's 
an animation; Autoplay, which 
causes the file to begin to play as 
soon as the page is loaded into a 
browser; and Quality, which con- 
trols how good the file will look, 
how fast it will play, and how long 
it will take to download. 
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9* When you finish adding the Flash file to your page, choose FileOSave to save the 
page; Dreamweaver automatically creates the script files and folder for the Flash 
file, which become visible in the Files panel. Be sure to upload the entire folder 
when you publish your work to the Web. 
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Contfertinq and Optimizing a Video file 



Sx 
Nee, 




Toolbox: 

A video file in any digital 
format 

Flash Video Encoder pro- 
gram (a free download) 



Time needed: 

About an hour 




You can convert video from one file format to another relatively easily by 
using most video-editing programs. For example, you can open a video in 
AVI format in a program such as Adobe Premier Elements (a good video 
editor for beginners) and then choose FileOExport to convert the file to 
any of a dozen other formatting and compression options. 

Editing video gets complicated, and optimizing video for the best quality 
with the fastest download time is both an art and a science. The most basic 
process of converting a video file isn't difficult, however, after you under- 
stand the conversion options. 

This task walks you through the process of converting a video file from 
Windows Media into Flash video (. f lv) using the Flash Video Encoder. The 
encoder is included in Adobe CS3 Creative Suite. 





Flash Video Encoder 
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/. Launch the Flash Video Encoder and click the Add 

button to load into the encoder a video that you want to 
convert into a Flash video file. In this example, I added a 
short video clip that was saved in Windows Media Video 
(WMV) format, but you can add video in a variety of for- 
mats, including AVI, MP4, and QuickTime. 
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2. Click the Settings button on the 
right side of the encoder to launch 
the Settings dialog box, shown here. 
Click the Encoding Profiles tab and 
choose a Flash encoding profile. 
The later the version of Flash, the 
better the encoding looks and the 
faster it plays back, but a trade-off is 
involved: Not everyone has already 
downloaded the latest version, so 
using an earlier version may mean 
that fewer visitors have to down- 
load the player to view your video. 
Because Flash is a fast and easy pro- 
gram to download, I think that the 
latest version is the best choice. 
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3. Click the Video tab and make sure 
that the Encode Video check box is 
selected. The video codec (which 
controls the compression of the 
video) is set automatically based 
on the Flash version you selected 
on the Encoding Profiles tab. Select 
the Deinterlace check box only if 
you're encoding video that's inter- 
laced, such as video captured from 
a television or VCR. Video that has 
already been encoded in a format 
like Windows Media doesn't need 
to be deinterlaced. 



4- Set the frame rate to the lowest setting that still looks 
good, to achieve the fastest download time. If you're 
encoding a video that has lots of action, you need a 
higher frame rate — ideally, 24 or better — or else your 
video loses details and looks fuzzy in places. If you're 
converting a video, such as this Windows Media file 
that has already been encoded, your best option is to 
choose Same As Source from the drop-down list to 
leave the frame rate unchanged. 



Frame rate: 
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Flash Video Encoding Settings 
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5. Set the Quality option to the lowest 
level that still looks good, to 
achieve the fastest download times. 
Use the slider under the Preview 
window to move through the frames 
of the video to see the effects of 
your settings. 



6. Click the Audio tab and adjust the 
data rate. Again, the lower the 
number, the lower the quality but 
the faster the download. If your 
audio file has only a single voice, 
you can set this option quite low 
and it still sounds good. If your 
audio file has music, special sound 
effects, or other multifaceted audio 
factors, set the data rate to at least 
96 Kpbs. Use the Cue Points tab to 
insert cues in the file that make it 
easier for someone using the file to 
jump to a particular section. Use 
the Crop and Resize tab to make 
the file smaller. (Note that trying to 
increase the file size of a video can 
result in a severe loss of quality.) 
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7. When the settings are complete, 
click OK; the Settings dialog box 
closes, and you return to the 
encoder. 



5. When you get all the settings the 
way you want them, choose Start 
Queue to begin the encoding 
process. This process can take sev- 
eral minutes, even for a short file. A 
small preview window in the lower- 
right corner of the encoder enables 
you to watch the encoding process 
in action. 
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Adding Flash Video to \lour Site 



Dro 
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Toolbox: 

Adobe Dreamweaver 
A Flash video file (avail- 
able from this book's 
companion site; see the 
Introduction for details) 

Time needed: 

About an hour 




Flash video is fast becoming the video format of choice among many 
designers. Video on the Web has been problematic for a long time because 
many different formats are available and you can never guarantee that 
everyone in your audience can view your videos in any single format. 

Although the video players have been fighting it out for years, Flash has 
stepped in to provide an option that's increasingly well supported 
because thousands of people have the Flash player and it's small and 
easy to download. 

Because Adobe owns both Flash and Dreamweaver, you find support for 
Flash files in Dreamweaver. You can use the Insert dialog box to easily 
set the many options for how a Flash video plays within a Web page. In 
the previous task, you find instructions for converting a video file into 
the Flash format. Follow these steps to insert a Flash video file into a 
Web page: 



7. 



Create a new Web page in Dreamweaver or open 
an existing page, and then click to place your 
cursor where you want the file to appear on the 
page. Then select Common from the Insert bar, 
and from the Media drop-down list, choose 
Flash Video. (You can also choose Inserts 
MediaOFlash Video.) 



nrviirHiFiiy 



I 



File Edit View Insert Modify Text Commands Site Yahoo! Window Help 
▼ Insert rumim 1 

^ cj4|E! h @ • • 0 & Q a, - - 1 B • 5? 

H Flrfl.ll 



~traier.html 
| code ^jj bpk I Vevqn 




Insert Flash Video 



Video type: 


Progressive Download Video v 






Progressive DewnJoad Video 




URL; 


St- ear k : j~ : ^ 




| . ./DreonwwMwer C53 Trailer ,tk Rro/refi... 





Cancel 



(Enter the relative or absolute path oh the Flash Video Hie) 



Tier: rftw 'ikn I (rnin width: 140) 



Wlrirh: Wl 
Haul*; 



0 C 



onstrain 



-A'J 



TUdl will sfcii; 960*5+0 



CH Autu ulny 
□ Auto rewind 

0 Pf ompt users to download Flash Player it necessary 



Message: Content on the poop requires a newer version 
of Adobe Fkreh Hover . Do you vrant to 
download it now? 



CP 



Tn <&p. the-. x1dpr>, pravS w ?he n^0 ft ln hrnwwr . 



3 




/- MoshDutton 
A / (lash Text 
rlashPopei 



I Shock wo vc 
Zr Applet 

$f ActiveX 
TV Plugin 



ideos Make Learning Fun 



2. 



At the top of the Insert Flash Video dialog box, 
specify streaming or progressive. Note that you 
must have a special server for streaming video. 
Check with your Internet hosting service or 
system administrator to find whether your Web 
server supports streaming Flash files. If not, 
select Progressive. Click the Browse button and 
select the Flash file from your hard drive. If the 
file isn't in your site's root folder, Dreamweaver 
offers to copy it there for you. The Flash file 
must be in your site's local folders because it 
must be uploaded to your Web server when you 
upload the page that displays the file. 
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Insert Flash Video 
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3. Dreamweaver calls the collection of controls for 
a Flash file a skin. Choose a skin from the drop- 
down list. A preview of the selected skin is dis- 
played in the dialog box below the Skin selection 
(although the drop-down list covers the preview, 
as shown here). 
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4- Click the Detect Size button; Dreamweaver 
automatically inserts the height and width of 
the Flash file into the HTML code. If you want 
the Flash video to play as soon as the page is 
loaded, click to select the Auto Play check box. 
To automatically rewind the video after it has 
played, select the Auto Rewind check box. 
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The Prompt Users to Download Flash Player If 
Necessary option creates a message that's dis- 
played for visitors to your site who don't have 
Flash Player installed. You can edit the message 
in the Message box if you want to change the 
wording. For example, you can change it to 
"Join the modern world — get the latest Flash 
Player already!" 



6. Click OK to insert the Flash file and 
close the dialog box. The Flash file 
is represented in the Web page by a 
box that has the same height and 
width of the video. Click the box 
that represents the video to select 
it, and you can make further adjust- 
ments to the settings in the 
Property inspector at the bottom of 
the workspace, such as choosing a 
different skin to serve as a player. 
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Finding out more about Flash online 



est places to find out more 
'g Flash files is on the Internet, 
where a wide range of Web sites offers 
everything from predesigned Flash files that 
you can easily customize to useful ideas for 
getting the most from this award-winning 
technology. Here's a short list of useful sites, 
to get you started: 

W Adobe (www. adobe. com): You find loads 
of tips and tricks for creating and using 
Flash files (as well as many inspiring 
examples of Flash in action). 



Swish (www.swishzone.com): If you're 
looking for an alternative to Adobe Flash, 
Swish is an excellent little program that's 
more reasonably priced. 

W Flash Kit (www. flashkit.com): This site 
has a wide range of resources for Flash 
developers. 

Flash Arcade (www.flasharcade.com): 

Play some of the best interactive games 
created in Flash. 
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7. To view the Flash video, preview the page in a 
Web browser by choosing FileOPreview in 
Browser and then choosing any browser from 
the menu. You must have Flash Player in order 
to view the Flash video on your computer. (Note 
that the Flash skin, which contains the Play and 
Pause controls, and others, becomes visible 
only when you roll the cursor over the bottom 
of the video.) 



5. When you insert a Flash video file and include a 
skin for the player, Dreamweaver creates a 
Flash file with the . swf extension and saves it 
in your root site folder. This Flash file contains 
the player controls. It must be uploaded to your 
Web site when you publish the page with the 
Flash file, in order for the player controls to 
work on your Web site. In this figure, the file 
named Clear- Skin_l . swf contains the Flash 
controller. 
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If you want to find out more about more advanced Flash settings, or parameters, visit www . Adobe . com and 
search for setting Flash parameters. 
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Upioadinq Videos to 1/ouTube 




Toolbox: 

An Internet connection 
A video file optimized for 
the Internet 

Time needed: 

About an hour 




YouTube has attracted a tremendous amount of attention in recent years as 
the place to find independently created Web videos. You can not only 
upload your own videos to www . youtube . com for all the world to see but 
also use the site as a hosting site for videos by simply adding a link to any 
video on YouTube to your own Web site. 

As you see in this short task, YouTube makes it easy to upload and link to 
videos. Just be aware that when you upload your own video to YouTube, 
you give up some rights to your content. (Read the agreement at 
YouTube.com for more details about copyright and other legal issues.) 
Also, you can upload only videos that are smaller than 100MB and take 
fewer than ten minutes to play. According to the site: "YouTube accepts 
video files from most digital cameras, camcorders, and cellphones in the 
.WMV, .AVI, .MOV, and .MPG file formats." You can also upload files in the 
Flash video format. 



The good thing is that most videos can easily work within those parame- 
ters. If your video is ready to post, follow these steps: 




/, Before you can upload videos, you must first 
register at YouTube, a free and relatively pain- 
less process that simply requires filling out a 
form on the site. 
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2, To upload a video, click the Video Upload link in 
the upper-right corner of any YouTube page, 
and then use the Browse button to locate the 
video file you want to upload from your hard 
drive. Fill in the fields in the upload form to 
describe the video and add keywords, to make 
it easier for YouTube visitors to find your video 
when they search the site. 
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Video Upload • Upload Complete 
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3- When uploading is complete, YouTube dis- 
plays a confirmation page that includes 
HTML code you can add to your own Web 
site or blog to display your video on your 
own site. To do so, click and drag to select 
all text in the box under the words Embed 
this video on your website and then press 
Ctrl+C to copy it. 
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4- To add the code to your Web page in 

Dreamweaver, click the Split View button at 
the top of the workspace to view the HTML 
code of any page, click to place the cursor in 
the code wherever you want the video to be 
displayed, and choose FileOPaste to insert 
the code you copied from YouTube. (Note: 
When you select any text or image in the 
design area of Dreamweaver, the correspon- 
ding code is automatically highlighted in Code 
view, to make it easy to find your place in the 
code before you paste the YouTube text.) 



5. To view your video on the YouTube site, click 
the name of the video in your My Videos list. 
You can also find your video on YouTube by 
searching for the keywords or title you entered 
when you uploaded the file. Also, if you inserted 
a link to your YouTube video directly in a page 
on your Web site, follow the instructions in 
Chapter 5 for previewing a Web page to ensure 
that your video is displayed correctly. 




You can always return to this page to edit your description or keywords and to find the code you need in order to 
embed the video in your own site: Click the My Account button and then My Videos, and then select the video 
you want from your list of uploaded files. 
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^^^^ uestion: "How do you make $1 million on the Internet?" 
Answer: "Invest $10 million." 

It's an old joke, but there's still truth in it today. Although you can 
find many stories about Internet millionaires who became rich with 
seemingly little effort or investment, the truth is that most good 
Internet businesses aren't much different from brick-and-mortar 
ones. You need a product or service that people are interested in, 
you have to deliver it in a way that's useful and accessible, and you 
must be able to promote your business so that customers can 
find you. 

Despite the risks involved, many people are making money from 
their Web sites, by using one of these two primary models: 

\^ Making money from advertising: You can sell and host ads yourself, or you 
can sign up for one of the online advertising networks, such as the excep- 
tionally popular Google AdSense. In this chapter, you find step-by-step tasks 
for creating and integrating advertising using Google AdSense or the affiliate 
advertising services Commission Junction or LinkShare, which make it easy 
to add advertisers to your site that pay a commission on any sales gener- 
ated from your visitors. 

)^ Selling products or services online: To sell products or services, you need 
to set up a system for accepting payment. Your options range from the 
simple (publishing a phone or fax number on your site that customers can 
call or send orders to) to the complex (a fancy, integrated shopping cart 
that enables visitors to select items as they navigate your site and automati- 
cally tabulates their purchase totals). Somewhere between these two 
extremes, you can sell products on sites like eBay or Amazon with little 
investment (or training) or set up a one-click PayPal button for simple pur- 
chases, which you find out about later in this chapter. 



Tasks Performed in 
This Chapter 

w Signing up for 
Google AdSense 

Inserting code 
into a Web page 
in Dreamweaver 

^ Adding advertising 
from AdSense to 
your site 

Setting up affiliate 
ads with 
Commission 
Junction 

Selling products 
and services with 
PayPal 



2&0 Part Going Web 2.0 



DropBo®, 



PayPal offers one of the simplest ways to sell single products — like memberships, 
tickets, or e-books — by using a Web site. If you want a more complicated shopping 
system, read my recommendations in the sidebar "Adding a shopping cart to your 
site J at the end of this chapter. I don't cover these services in detail because 

cellent book in this series, Web Stores Do-It-Yourself For Dummies, by Joel 
Publishing), explains this type of sales site in depth. 




cjVVNG/ Because this chapter features live Web sites, some of the screen shots may have 
changed since this chapter was written. As a result, you may have to make adjust- 
ments to some of the instructions, although the basic concepts and tasks should be 
similar. 
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Addinq Advertisers tfith Google AdSense 



Dro 




Toolbox: 




A connection to the 
Internet 

A Web browser, such as 
Internet Explorer or 
Firefox 

A Web site where you 
want to add Google 
advertising 

A Web page editing pro- 
gram, such as Adobe 
Dreamweaver 



Time needed: 

About half a day 



You can find Google ads on so many different Web sites that the ads 
seem to appear automatically. And in a way, they do. As you see in this 
task, you must sign up for an account, select the type of ads you want, 
and generate a snippet of code to insert into your own site. After you 
set it up, though, the rest is automatic. 

Google has developed an extraordinarily complex system that makes it 
exceptionally simple to host its ads, and not just any ads, but ads that 
Google can specifically deliver to your pages based on a number of cri- 
teria. The little snippet of code that you place in your pages enables 
Google to handle several tasks at once, including the ones in this list: 

• Target ads: The automated Google system reviews the text 
on your Web pages and matches any relevant keywords it 
finds to related ad campaigns. 

• Deliver ads: After the snippet of code is on your pages, 
Google can deliver ads automatically based on keyword 
targeting and other criteria. 

• Track traffic: Google measures the traffic to each page 
that displays Google ads and tracks the number of people 
who view the page as well as the number of people who 
click to view the ad. 

• Measure effectiveness: Using a complex system of data 
collection and analysis, Google can deliver detailed reports 
to advertisers about the success of their campaigns. 

• Calculate payments: The system keeps a running total of 
the income you've earned from your Google ads and 
deposits the money into your bank account automatically. 



To sign up for Google AdSense, follow these steps: 
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7. Open a Web browser with a connection to the 
Internet, and enter the address www.Google. 
com. On the main Google page, click the 
Advertising Programs link. 
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2. The Advertising Programs page is 
split in two sections: On the left side 
is information about buying ads, and 
on the right is information about 
how publishers can make money by 
placing ads on a site (publishers, in 
this sense, are site owners who 
place ads on a site). In this task, I 
focus on the publisher side of the 
business, so click the Sign Up Now 
button, on the right side. 



3- Fill in the registration form with 
your Web site address, your name, 
and other details. Be careful to fill 
out this form accurately because 
the address you enter is the one 
Google sends checks to if your ads 
are successful. 
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4. Pay special attention to the Google Policy sec- 
tion, at the bottom of the registration form. You 
must select all these check boxes to indicate 
that you agree with the policies and will follow 
the rules. Google has had problems with site 
hosts clicking the ads on their own sites in an 
effort to generate income, a practice it now 
works hard to prevent because it devalues its 
advertising. When you're ready, click the Submit 
Information button. 
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5. On the verification page that's displayed, read 
the form carefully to ensure that your informa- 
tion is entered correctly If you already have an 
account with Google (or Gmail or any other 
Google service), you can either use that 
account with AdSense or create a new login. 
Either way, complete the form and click the 
Continue button. 



6. If you filled out the form correctly, Google dis- 
plays a confirmation page, even though you 
can't get started right away. Google reserves 
the right to accept or reject anyone who 
applies for the AdSense program and, as the 
confirmation page warns, it can take a day or 
two for Google to review your site and notify 
you of your acceptance. In the meantime, you 
can find lots of helpful tips and tutorials for 
finding out more about how to make the most 
of Google AdWords. 



Google 



SMMAdS«lt»«fl 



Hilt* you lot your dml n G*ogW AtfStnw Voir 
tfnaJ m t'2 daft 



In th» *>••<*•«•. pt« ih ltd to <*i« in* 
I l»qu>mty 11I Qui 



VVtun to I at amd? 
Cm I &om Ml mow ttitn oil* 



h>t now b**n tut>m4tt<$ fa» and •■B lolow up u^h you by 

to» anoMWi to wtf o/j»it.o'i« you m»y h«x ■bout r»« program 



• ftfiratirirtnih 



(t*4>M* MttrOAuMfc* FlMk) 

• Qrtmttaj^Otmt 



<...»•,!.■ PuUHh.. look 

• Dm* IrA to ye*. M.~th 6ooc«. Arf*o*>4 

• heww rout ft nwbKi w Good* H nwli Sooolo rVbrnatif Toe* 

• Add mt*>aclM« r la 7 out «te »•* f 

• OHt*f ( 



ig. Welcome- 10 MShh - UoA ftrakw: 

Mi Fritt VSuw MMhry Rimkiruik'; IikiIm Ifcttrr ft : |.4fi:d I u«V-. 

' ^" t . Irtr,|l*r' ,W^j|JOOn>*£im'ato 



Ir it". 



Googl 



rnqli'^i flj£) 



a 



Earn money from relevant ads on your website 

U:if|le ^rlfiRnEB nruiarfi<n arts. In your rOnrrinrl, and prtu »lm mnr.py 
wti*n*«r your irisiiuf 1 elicit an ttitfii 




* 



^priiifi 



Ros gf,, OeWeiL end more 

I cil Jl flnniiL'. S jrrn.i \ijf ilijlrnrfy 
rriih«srHrnnr'i ItamllQiKr 

■»i-wwi mdi»nKa|i|iy-: i iini 



ExkHodj AdS»nEO use nt; 

Si n n in lo Googl* AtfGensf wth four 
Ca v Account 

Fniail |anime@i|cv«*ir>Br) eo 



1 ;.<iix.< »i.lf:.: 



1 41 ri in .ill 11 11 1 AiESmiMi 

PrOgVltlS 

Itnm? 



ArJSeme for contEnt aulomahrs'ly erar* 4 ^ cameni cifyDL' ruqtE- and dalwi* aris (you 
L4ii iKuciK L-jlh lut\ at irnigv ids) 1hnt »nf riil^mnl lo yuui Hgdniraicv ind Jdui ailt; 
nnnliiiH- jrli mi W4'll riulchrr). in Tad. Ihj| yaw iifadH'n will jLtirjIlj 1 tnif Ihum ir.Mful 



Qr.J* «itJ0«i. (J U lni)F« lui » 

b4t*uur\jl p*'d»n. 



r"rr.iui,,.m 

lr.H',-ni»4ivi (.'!■ ti«i»nni«ll ►■■.J -l.nl. 

tiwtf *a't( bntf«r vnur n*idi. 



■ilk t -k >d; ArJSienw Por search allows *gbsilB pL'sli^hers 10 piovde Oscgle wbc- afid arte search tfl 



7. After you receive e-mail confirma- 
tion from Google, you have every- 
thing you need to log in and create 
the code for advertising on your 
site, and you can continue to 
Step 8. Follow the link in the e-mail 
message or enter www.google. 
com/adsense to go directly to the 
login page. 
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8. Click the AdSense Setup tab at the 
top of the page and then select the 
type of ad you want to create. If you 
want to place advertisements on 
your Web site, the AdSense for 
Content section is the best place to 
start. Simply click the AdSense for 
Content link to continue. 



9* Choose the kinds of ads to display 
on your pages. For example, select 
Ad Unit and then choose from the 
options: text ads, image ads, or a 
combination of the two, which 
results in the largest number of 
advertising options for your site. 
Alternatively, you can select a link 
unit, which displays links to more 
general topics (matched to the key- 
words on your site) and displays 
for visitors a page of ads related to 
that topic. After you make your 
selection, click the Continue button 
at the bottom of the screen. 



10. Choose the size and colors of the 
ads to display on your pages. Using 
the Format drop-down list, choose 
a size and shape that works best 
with the design of your Web pages. 
Note: You can repeat this process 
again to create ads of different sizes 
for different pages in your site. For 
now, choose the one you want to 
start with, such as the vertical 
120 x 600 skyscraper that I selected 
in this example. 
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/ 7. Choose a color scheme from the drop-down list 
next to the palettes, or create your own color 
scheme by selecting the color check boxes 
next to each of the ad elements, such as 
Border, Title, and Background. You can also 
specify the style — rounded or square — of the 
corners of your ads. Finally, choose the content 
you want to display if no Google ads match the 
content of your Web page. For example, you 
can choose to display public service ads for 
free if no paying advertisers are available or 
simply fill the space with a solid color. Click the 
Continue button when you're done. 



72. On this screen, you have the option to create 
channels, which can help you track the effec- 
tiveness of advertising on different parts of 
your site or across different Web sites, if you 
manage more than one site. You can create a 
channel for a specific domain name or create a 
custom channel to track the effectiveness of an 
ad size or style that you use across your sites. 
Channels are a unique concept at Google, but 
they essentially serve as categories for certain 
kinds of advertising you want to track. 
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73- Finally, you see the Get Ad Code page, where 
Google has generated a snippet of code based 
on your selections on the previous screens. If 
you change your mind, you can always go back 
and make adjustments by clicking the Back 
button at the bottom of the page. If you're 
ready, simply click and drag to select all code in 
the AdSense code window, and then choose 
EditOCopy to select the code so that you can 
add it to your Web pages. Then follow the 
instructions in the following task for inserting 
code into a Web page. 
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Inserting Code into a Web Page 




atfer 



Stuff l/ou 
Need to Know 



Toolbox: 

\* Adobe Dreamweaver 
A Web browser, such as 
Internet Explorer or 
Firefox 

\* A snippet of code from a 
site like Google 
A Web page where you 
want to add the code 



Time needed: 

About half an hour 




To add code to a Web page, open the page in an editing program, such as 
Adobe Dreamweaver. In this example, I inserted the code I copied from the 
Google AdSense site in the previous task. You can add the same code to as 
many individual pages in a site as you want, and you can add the code to a 
template page, like the one shown here, to add the code to numerous pages 
simultaneously. 
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7. The trick here is that you need to paste the 
code you copied from the Google site into the 
HTML code of your Web page. In Dreamweaver, 
the easiest way to do that is to first click the 
Split View button, in the upper-left corner of the 
workspace, to display the code behind the page 
in the top part of the workspace. The advantage 
of using Split view is that you can see Design 
and Code views at the same time. Here's a tip: 
Click any element in Design view, such as the 
headline Dreamweaver Tutorials on the right 
side of this page, and Dreamweaver automati- 
cally highlights the corresponding code so that 
you can find your place more easily. 



2. Find the exact place on your Web page where 
you want to add the code, such as these Google 
ads, and click to place the cursor in the code. 
Then choose EditOPaste to insert the code from 
the Web site into your page. Notice that the 
Google AdSense code is surrounded by 
<script> and </script> tags. If you ever 
want to change or remove this code, you must 
include all of the code. 
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3- One of the most confusing aspects of adding 
Google AdSense code to a page in Dreamweaver 
is that, although you can see the code in Code 
view, no visible change takes place on the page in 
Design view To view your ads in Dreamweaver, 
you preview the page in a Web browser: Either 
click the Preview button at the top of the work- 
space or choose FileOPreview in Browser and 
then select a browser to display the page. As long 
as you're connected to the Internet, the Google 
ads should be displayed wherever you added the 
code to your page. If everything looks okay, 
you're ready to upload the pages to your Web 
server, where the ads will become visible to your 
visitors and you can start earning money! (You 
find instructions for uploading your pages in 
Dreamweaver in Chapter 9.) 



When you open Dreamweaver to add your code, leave your Web browser open so that it displays the page 
where you copied the code, in case you want to make changes or need to copy the code again. You can easily 
switch between two programs on your computer by pressing Alt+Tab (or 3§+Tab on a Mac). 



The code you copy from a site like Google may include a script or other code that isn't in basic HTML. This issue 
shouldn't matter, as long as you copy the code exactly as Google (or any other Web site) instructs you to and 
you paste all the code into the HTML in your Web page. For example, if the code begins with a <script> tag, 
it should include a </script> tag. 
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Signing Up With Affiliate Programs 



Dro 



it 
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Toolbox: 

A connection to 
the Internet 

A Web browser, such as 
Internet Explorer or 
Firefox 

A Web site where you 
want to add affiliate 
advertising 



Time needed: 

About half a day 




Affiliate programs are a special type of advertising program designed to 
pay you a commission on any product or service that's sold if someone 
clicks on an ad on your Web site. The tasks of signing up for affiliate pro- 
grams and adding their respective code to your Web site work similarly to 
the way you do them in Google AdSense, but the way you earn money with 
them is quite different. 

With AdSense, you earn a small commission every time someone clicks on 
an ad on your Web site. If you use affiliate ads, however, you're paid only if 
someone clicks on the ad and then buys something from the advertiser — 
but you usually get paid much more if your ad leads to a sale. For example, 
a Google ad might earn you a few cents when someone clicks on it, but an 
affiliate link to Total Training (which produces video training programs) 
can earn you as much as 20 percent of the sale price on purchased videos, 
and that amount can be $20 or more per video. 

Perhaps the most famous affiliate program is the one created by Amazon. 
Like most programs of this type, including Google AdSense (which I cover in 
the previous task in this chapter), you must first fill out a registration form 
and wait to be approved, and then generate on the Amazon site a snippet of 
code that you can add to your own pages. You can find many similar pro- 
grams, run directly by companies like Amazon, but if you want to use affili- 
ates, you also find sites like LinkShare and Commission Junction, which take 
on the task of managing the relationship between advertisers and publishers. 



For advertisers, the advantage of a site like LinkShare or Commission 
Junction is that it handles all the technical details of signing up publishers, 
delivering ads, and tracking results. The advantage for publishers who 
want to add affiliate ads to their Web pages is that you can sign up once 
with a site like Commission Junction and then add many advertisers to 
your pages through their sites. 



The following steps walk you through the process of signing up for the 
Commission Junction affiliate program (the LinkShare program is quite sim- 
ilar, and you can sign up for both programs to access all their advertisers): 
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/• Open a Web browser with a con- 
nection to the Internet, and enter 
the address www.Commission 
Junction.com. Click the Publishers 
link to read more about the pro- 
gram, or click the Click Here to 
Apply link to go directly to the pub- 
lisher's registration page. 



2. Select the language you prefer and 
your country and currency, and 
then click Next. As of this writing, 
Commission Junction invites partici- 
pants for most countries in the 
world but supports currency only in 
U.S. dollars, euros, British pounds, 
Swedish kronas, and Canadian dol- 
lars. Check the Web site for specific 
instructions for currency exchange 
based on your country, as well as 
updates and additional currency 
that the company plans to support 
in the future. 
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3- Review the service agreement, and 
note that you must scroll to the 
bottom of the agreement and click 
the Accept button in order to accept 
it. Fill in all required fields, indicated 
with an asterisk (*). Commission 
Junction asks for a great deal of 
information on this page, including 
your Social Security number, and 
you must answer all required ques- 
tions if you want to sign up for this 
affiliate program. Click the Accept 
Terms button at the bottom of the 
page when you're done. 



4- When you click the Submit Information button, 
Commission Junction displays a confirmation 
page and automatically sends you an e-mail 
with instructions for completing the registra- 
tion process, filling out a W-9 tax-information 
form, and logging in to the site with your new 
username and password. Enter www.cj.com 
into your Web browser, and use the login and 
password information from the e-mail to sign in 
to the site. 
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5- The CJ Account Manager features a series of 
tabs across the top of the page, where you can 
make changes to your account information, run 
reports to track the success of ad campaigns, 
and use the Commission Junction integrated 
e-mail system. Click the Get Links tab to start 
creating the code to add to your Web pages. 
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6. 



On the Get Links page, you find a 
seemingly overwhelming number of 
options, but your first step is essen- 
tially to choose the advertisers you 
want to work with. A good way to 
start is to browse the categories of 
advertisers to get a sense of the 
available options. Look for advertis- 
ers that sell products or services 
that are most likely to appeal to the 
people who visit your Web site. 



(^commission junction 



7. To narrow the list of advertisers 
you can browse, click the 
Additional Search Options link, at 
the top of the Get Links page, to 
limit the list by language, product, 
and other criteria. Limiting the list 
to at least the advertisers in your 
primary language is a good start. 
In this example, I selected compa- 
nies that offer products or serv- 
ices for babies. 
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5. As you drill down through the list of potential 
advertisers and start to make your selections, 
consider the commissions they offer and their 
overall performance in the network, all of 
which are listed for each advertiser. 




If you're looking for a specific company, you can enter the name into the Search field at the top of the Get Links 
page at any time. If the company you're looking for isn't available, Commission Junction provides you with a list 
of similar companies. 
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^, Click the name of any advertiser to display a 
Details page with a description of the company, 
program highlights, and links to advertising 
options. Click any of the options in the Get 
Links box, in the upper-right corner, to generate 
the code you need in order to add the adver- 
tiser to your Web site. In this example, I chose 
the Banner ad option for BabyUniverse. 



10. Most advertisers offer a collection of distinct ad 
sizes and designs, and you can choose which 
ones you want to place on your pages. When 
you find one you like, simply click it to continue. 
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7 7. if you've never worked with the advertiser, you 
need to join its program before you can add its 
ads to your site. Some advertisers require a 
manual approval process that can take a few 
days; others accept you into the program right 
away. 
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Drop 




Finding affiliate programs 

iirQ^pribes a few of the more popu- 
iatVprograms you can add to your 
Web site: 

Commission Junction: Featured in the 
lesson in this chapter, Commission Junction 

(www.commissionjunction.com) is one 
of the most popular affiliate networks on 
the Web. 

LinkShare: Similar to Commission Junction, 
LinkShare (www.linkshare.com) is a net- 
work of affiliate advertisers and makes it 
easy to work with many affiliates at once. 

Chitika: Specializing in blogs, this site, at 
www.chitika.com, offers publishers a 



service that's part Google AdSense and part 
affiliate program, by offering ads that pay 
for clicks and sales. 

Amazon: One of the oldest and best- known 
affiliate programs on the Internet, Amazon 
(www.amazon.com) makes it easy to sell 
books, computers, and any other products 
available on the site with links that direct 
your visitors to the exact product page at 
Amazon.com. 

Check out these popular affiliate programs 
online, and don't forget to search the Web 
for affiliate sites. 



72. After you're accepted into the program, the 
bottom of the Details page changes to offer 
options about how you can obtain the code you 
need to add to your own site. Choose HTML if 
you want to add the advertiser by simply copy- 
ing and pasting HTML code into your Web page. 
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13. When you're ready, simply click the Highlight 
Code button to select all code in the code 
window, and then choose EditOCopy to copy 
the code so that you can add it to your Web 
pages. Then open the Web page you want to 
add this code to in a program such as Adobe 
Dreamweaver. You can add the same code to as 
many individual pages in your site as you want, 
and you can add the code to a template page in 
Dreamweaver to add the code to numerous 
pages simultaneously (For instructions, see the 
task "Inserting Code into a Web Page in 
Dreamweaver," earlier in this chapter.) 
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Adding a PayPal Button 
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Toolbox: 

A connection to the 
Internet 

A Web browser, such 
as Internet Explorer or 
Firefox 

A Web site where you 
want to add a PayPal 
purchase button 
A Web page editing 
program, such as Adobe 
Dreamweaver 



Time needed: 

About half a day 




You can sell products and services online in many ways. At the simple 
end of the spectrum, you can set up an account at PayPal.com and start 
selling products or services in a matter of minutes, with minimal effort 
and no upfront investment. 

Moving up the scale in complexity and price, you can create a shopping 
system at any of the dozens of e-commerce sites that offer more com- 
plex shopping cart systems. 

I recommend, as a general rule, that you start simple and add more 
complex and expensive e-commerce options as you start making more 
money. If you're determined to add a full-featured shopping cart right 
away, the book Web Stores Do-It-Yourself For Dummies, by Joel Elad 
(Wiley), gives you detailed instructions for using some of the most 
popular online shopping systems. 

If you want to get started with PayPal right away, follow these steps: 



7. 



Open a Web browser with a con- 
nection to the Internet, and enter 
the address www.PayPal.com. 
Click the Merchant Services tab at 
the top of the window to see a 
detailed explanation of the many 
kinds of payment services offered 
by PayPal. 
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2. On the Merchant Services page, 
you find links to the many kinds of 
payment services offered by 
PayPal. Notice that each option 
includes a link to sign up, a link to 
watch a demo, and a link to find 
out more about pricing informa- 
tion, including fees and commis- 
sions. Click the Sign Up link to 
begin the registration process. 



3- If you already have a PayPal account (even if 
you used it only to purchase items in the past), 
you can log in with your existing account infor- 
mation and continue with the setup process to 
upgrade PayPal so that you can use its sales 
services. If you're new to PayPal, click the Sign 
Up button to continue. 
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4. You can read about your options and the steps 
involved on the Get Started page, but all you 
need to do is click the Go button next in the 
Sign Up Now area to continue. 
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ayPaluses this information to process pay- 
ments and to verify your identity when you use 
its service. When you finish with the online reg- 
istration process and enter all your bank infor- 
mation, the Get Started page is displayed, 
where you can verify your information. 
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6. To confirm your e-mail address, click the Go 
button. PayPal sends an e-mail message to the 
address you entered when you completed the 
registration form. Open the link in that message 
in a Web browser and enter your password 
when prompted to complete the e-mail verifica- 
tion process. 



7. When you complete the registration process, 
and whenever you log in to PayPal, you should 
see the My Account Overview page, where you 
find links to the many features offered by 
PayPal. Next, you should complete the bank 
verification process, which you can do by 
scrolling down the page and clicking the Go 
button, next to Confirm Your Bank Instantly. 
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Because PayPal is a prime target for fraudulent activity and identity theft, it provides many levels of verification 
and mechanisms to confirm your information, from your e-mail address to your bank account. Taking a little 
extra time to verify all your information can help protect you and your accounts. 
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5. To ensure that you're who you say you are and 
that you have access to the bank account you 
entered when you registered, PayPal makes two 
small deposits into your account. The amounts 
may be as little as a few cents, but the goal isn't 
for you to make a lot of money — it's to make 
sure that you can prove that the account is 
yours by entering the exact amount of the 
deposits into the bank confirmation form on 
PayPal. Your bank will likely take a few days to 
record the deposits, and you can find out the 
amounts so that you can confirm your account. 
In the meantime, you can continue to set up 
your account and even begin using the PayPal 
services. You just can't withdraw any money 
from your bank account until you can tell 
PayPal the exact amount that was deposited 
into your account. 



9* Click the Merchant Services tab at the top of the screen whenever 

you're logged in to your account, to set up or edit any of your payment 
systems for your Web sites. The simplest payment system uses the Buy 
Now button. To create one for your site, click the Buy Now Button link 
near the upper-left corner of the page. 
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10. Fill in the Create Buy Now Button form with 
information about the product or service you 
want to sell and the amount you want to sell it 
for. Then select the size and style of button you 
want. (This is how the button will appear on 
your Web page.) Then choose your shipping 
and sales tax options. You also have Button 
encryption options: Select the first radio button 
to enable encryption if you want to create a 
button that's more secure, but note that it 
cannot be edited again after you create it. (Of 
course, you can always go back and create a 
new button if you want to make changes.) Select 
the second button if you want to be able to 
modify the code after it's added to your page. 
(You should choose this advanced option only 
if you know how to edit the code yourself.) 
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Adding a shopping cart to your site 



Pal offers a quick and easy way 
products and services on the 
Web, you might find many other options 
superior, especially if you want to sell many 
products or services on yourWeb site. Here 
are a few of the most popular e-commerce 
options on the Web: 

Yahoo! Merchant Solutions: Yahoo! 
Merchant Solutions (store.yahoo.com) 
offers a full line of e-commerce services, 
including a multifaceted shopping cart. 

ProStores: ProStores (www. pros tores . 
com) offers an all-in-one shopping system 
and an enterprise-level e-commerce solu- 
tion that includes supply-chain and vendor- 
management tools. 



1&1:The 1&1 site (www. landl . com) claims 
to be the largest domain registrar in the 
world. This site also provides Web hosting, 
e-commerce, and a shopping cart system. 

PayLoadz: PayLoadz (www . payloadz . 
com), which works with PayPal, is specially 
designed to sell downloadable products 
such as e-books and software, and fee- 
based services, such as subscriptions and 
memberships. 

For more detailed instructions on working 
with these shopping carts, read the book 
Web Stores Do-lt-Yourself For Dummies, by 
Joel Elad (Wiley Publishing). 
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/ 7. Click the Create Button Now button at the bottom 
of the form to add the Add a Buy Now button to 
your Web page. Click the Select All button at the 
bottom of the page to select the code that PayPal 
generated, and then choose EditOCopy to copy 
the code. Next, you need to open the Web page 
that you want to add this code to in a program 
such as Adobe Dreamweaver. (For instructions, 
see the task "Inserting Code into a Web Page in 
Dreamweaver," earlier in this chapter.) 
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Chapter 14 

DropBotFtoCool Services for Your Site 



In This Chapter 

Finding inexpensive professional images 
^ Using pop-up previews 
^ Identifying fonts in graphics 
^ Creating surveys for your visitors 

Adding a favicon to the address bar 

Hiding your e-mail address from spammers 
^ Tracking Web visitors 

Setting up a teleconference 



The best Web sites include a broad range of features, from attractive graphics 
to interactive surveys to detailed reports about site visitors. But many of the 
most advanced features are highly complex to create and maintain. Fortunately, a 
growing list of Web services allows you to easily add specialized options to your 
Web site, without having to spend a lot of time or money. In this chapter, I introduce 
you to some of my favorite online resources — sites that can help you take your 
site beyond the basics without breaking the bank. 

Most Web-based services like these make it easy to set up an account and then gener- 
ate a snippet of HTML code that you can add to your own Web site. You find instruc- 
tions for adding code snippets to your pages using Dreamweaver in Chapter 13. 



Finding Out Who's Visiting l/our Site 

Most Web hosting services provide basic log reports and traffic information, but 
if you truly want to know how people are finding your Web site and what they're 
doing after they get there, consider using a service such as StatCounter.com 
(www. StatCounter . com) or Webstat, described in detail in the next section. 
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Tracking Visitors With Stat Counter 



To use the 5 
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traffic and 2 



To use the StatCounter service, you set up an account and fill out a few forms to 

stom setup for your site. Then just copy a bit of code from the site into the 
r Web pages. StatCounter then uses that invisible bit of code to track site 
generate reports that you can view to learn more about your site's visitors. 
(You find instructions for adding a snippet of code to your pages in Chapter 13.) 



You can start with a free, limited level of service at StatCounter and then upgrade for a 
fee to view more data (up to 15 million page loads per month). Visit StatCounter.com 
for a demo and a sample report showing all the different kinds of information you 
can collect, including which keywords people use to find your site through search 
engines, which browsers they use to visit your pages, and how long they stay after 
they get there. Studying how people use your Web site is one of the best ways to 
determine how to develop your content and design and establish where you're likely 
to achieve the greatest success with your Web site. 



Watching traffic With Webstat 

If you're looking for the best services for your site, give the online traffic-reporting 
system Webstat (www . webstat . com) a try. Similar to StatCounter, Webstat has you 
set up an account and then insert a snippet of code from its system into your pages. 

At Webstat, you can display a Web counter on your pages for visitors to see, or you 
can keep your traffic numbers private by using its invisible service. Sign up for a 
limited free account, or consider one of the paid levels of service for more detailed 
reports. 



Downloading Professional 
Images Inexpensively 

Professional photographs and graphics can transform a simple page design into a 
professional showcase. But high-quality images can be pricey. For professional, 
royalty-free images without the high price tag, visit iStockPhoto (www. istock 
photo . com) where you can buy — and sell — high-quality photos and other images 
for $1 to $5 (depending on the resolution). 

This searchable site makes it easy to find all kinds of photographs, illustrations, and 
even animated graphics and videos. Search for German Shepherd, for example, and 
you'll find nearly 1,000 photos of those lovely beasts; search for dogs and you'll find 
more than 16,000. You can even search for general terms, like smile or raised hands, 
to find images to fit almost any design idea or Web site. 

When you find a photo that you like at iStockphoto, you have the option of down- 
loading a "comp" version for free. (It has the iStockphoto logo printed across the 
middle but is handy for mockups). You can also save images into a collection (called 
a lightbox) that's stored on the iStockphoto Web site so that you can easily go back 
and review your favorites later. 
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When you're ready to purchase images, you can use any major credit card to buy cred- 
its on the site. The more credits you buy in advance, the better the price. The cost of 
each image is based on the resolution — the higher the resolution, the more the image 
cos|s, and most images are available in multiple resolutions. Low-resolution images, 
k fine for most Web sites, cost as little as $1. The standard rights agreement 
st commercial uses up to 500,000 copies. An extended license is available 
for a higher price. Make sure to read the license agreement for details. 



In Chapter 4 you find instructions for editing, resizing, and saving images. See 
Chapter 5 for instructions for inserting images into your Web pages. 



Highlighting Links With Pop-Up Previews 

The innovative online service Snap.com (www. snap . com) creates a small pop-up 
preview of any page you link to on your site. You simply sign up — for free — at 
Snap.com and use its online tool to generate special code that you can copy and 
paste into the code in your Web pages. 

With the unique Snap.com pop-ups, anytime a visitor rolls the cursor over a link, a 
small pop-up window appears with a preview that displays the page or site that you 
linked to from your site. It's a useful way to give visitors a little more information as 
they peruse your pages and to highlight the links on your site. 



What the Font} ( An Online Matchmaker) 

If you've ever tried to identify an unusual font, you know how challenging it can 
be and you'll likely appreciate the character-recognition software offered at 
WhatTheFont.com, (www. what the font). Using this free, online service, you can 
upload any graphic or enter the URL to any image on the Web, and the program 
analyzes the image and tries to identify the font. 

The system isn't perfect, but even if WhatTheFont can't identify the exact font, it 
gives you the closest matches it can find, which at least gets you pointed in the right 
direction. You can also opt for the "human" service, to have your graphic further 
reviewed by expert font matchers. 

And, if you want to buy the font after you use the service to identify it, the site's 
creators are happy to sell you fonts that you download to your own computer. For 
more on the best options for using fonts on the Web, see Chapter 5. 



Surt/eying \lour Visitors 

If you want to know what visitors to your site really think, just ask them. 

An online survey is a helpful way to gauge the experience of your audience and to 
invite reviews. You can also use online surveys as planning tools to poll your audi- 
ence about how and where they might want an event, for example, or which new 
features they're most interested in. 
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You can create a free, online survey at SurveyMonkey.com (www . surveymonkey . 
com), and link to it from your Web site. Survey Monkey makes it easy to create the 
survey by simply filling out a form in a Web browser and then automatically tallies 
and presents them in a series of reports and pie charts. It's an excellent 
ress your board of directors at your company's next annual meeting. 



Dressing Up the Address Bar With a Fartcon 

Have you ever wondered how some sites add those little custom graphics to the 
address bar, at the top of the browser? For example, Google adds the letter G and 
Adobe adds its logo. You too can add any image to your site — you just have to get it 
in the right format. 

Fortunately, turning a graphic into a favicon (or shortcut icon) is easy and free at 
www. html kit . com/ services/ favicon/. Just upload any graphic of your own, 
and this online tool automatically converts it into a favicon that you can use on your 
site. After your image is saved in the . ico format, you simply upload it to the main 
root folder of your Web site, and your image is automatically displayed on the 
address bar in a browser. 




Favicons also appear in the list of bookmarks, or favorites (which is where the name 
comes from) when a visitor saves your Web site in a browser. Including a favicon, 
therefore, can make your site stand out from a list of saved Web addresses and can 
help build and strengthen your brand. 



Protecting \!our E-Mail Address 
from Spammers 

Spammers gather millions of e-mail addresses from Web sites every day by collecting 
e-mail addresses from links on Web pages. Web designers commonly include e-mail 
links so that visitors can easily contact them. Unfortunately, those simple e-mail links 
make it even easier for spammers to gather e-mail addresses automatically. 

To help counter this problem, the programmers at AddressMunger.com 
(www. addressmunger . com) have come up with a special way of "hiding" e-mail 
addresses from the automated bots that spammers use. When you add this special 
code to your Web pages and use AddressMunger to create the e-mail links on your 
Web pages, your visitors can still e-mail you easily, but spammers can't read your 
e-mail address. It's an easy way to cut down on all that spam in your inbox. 

To use this service, you add two snippets of code: one into the top of a Web page 
and another wherever you want your e-mail address to appear. You find instructions 
for adding code to your pages in Chapter 13. 
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Coi|ference-calling services capable of hosting dozens or even thousands of callers 
costly and complicated systems. Now, thanks to the online services at 
rence.com (www. f reeconf erence . com), you can set up conference calls 
for free. For a specialized service, such as a conference call with an 800 number or a 
recording of the call after it's completed, you have to pay a fee, but it's much lower 
than traditional conference-calling systems. 



To use the service, simply sign up for the free account, and you can immediately 
start scheduling conference calls. 

Many people now provide online training and teleconferences by setting up confer- 
ence calls with a service like FreeConference and then providing an online compo- 
nent, such as a PowerPoint presentation on a Web site like SlideShare.net (described 
in the following section). 



Sharing PowerPoint Presentations 

Online training, teleconferences, and virtual seminars are increasingly popular, 
thanks to services like SlideShare.net (www. slide share .net). To use this innova- 
tive service, just upload your presentation to the site and point visitors to your spe- 
cial address, where they can view your slides and use the simple controls at 
SlideShare to move forward and back through your presentation. 

Combine SlideShare with a service like FreeConference and you're ready to host a 
professional teleconference or online seminar — without spending a cent. 
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In This Chapter 

Building contacts on social-networking sites 
Ranking on social-bookmarking sites 
Attracting return visitors with regular updates 
Finding useful ideas on other Web sites 
Getting mentioned in traditional media 
Spreading the word with viral marketing 
Blogging 

Reaching out to your personal contacts 



What if you build a Web site and nobody comes? Unfortunately, that's an all- 
too-common problem on the Internet. And, that's why I can't end this book 
without at least pointing you in the right direction to promoting your Web site. 

Driving significant traffic to the pages of a site requires a significant amount of time 
or money or an incredibly compelling message. If you can manage all three, you 



should do very well indeed. 



In this chapter, you find tips and online resources and my best advice for getting 
people to visit your Web site. 



Making \lour Site Search Enqine-Fviendty 

The buzzword here is search engine optimization, or SEO, a highly complicated sci- 
ence that involves getting search engines like Google and Yahoo! to list your Web site 
higher on the page than your competitors. 

Thousands of companies and services promise to "get you in the top 10 matches" on 
search engines for as little as $39.99. Be wary of these services. The truly good ones 
charge thousands of dollars per month (with good reason), and the bad ones can get 
you kicked off search engines for breaking the rules. 

Scoring high in Web searches is complicated because millions of sites are vying for 
the top spots and because search engines use complex formulas for determining 
which Web site should match any given keyword search. Search engines also guard 
their formulas more carefully than Coca Cola guards its syrup recipe. Search engines 
also change their formulas regularly. (How regularly is also a secret.) 
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The reason for all this secrecy is that the people who run sites like Google.com want 
to deliver the best results when someone searches the site, not just a list of the sites 
that smart Web marketers figured out how to position at the top. But there's much 
money to be made at the top, so Web marketers spend countless hours testing how 
Aifctf^&ines work to come up with their best guesses about the criteria that 
brMBgines are using and how best to move their sites up the list. 

The result is sort of a cat-and-mouse game, with search engines changing the rules 
to thwart the marketers' most-calculated efforts, and people who specialize in 
search engine optimization charging big bucks to figure out the secret formula that 
can put you on top. 



The more competitive the keyword you want to match, the more challenging the 
game. For example, if you want to be the first hotel listed when someone searches 
for Hawaii + hotel, you're in for a challenge. If you own a bed-and-breakfast (B&B) in 
a rural area, however, it may not be hard to score high when someone searches for 
locations in your small town. 

Although the subtleties of the search engine game are complex, the basic criteria 
that search engines use are straightforward. For the most part, search engines score 
sites based on the words and images on Web pages and on how well their content 
matches the keywords that are searched. For example, if you own a B&B in Point 
Reyes Station, California, you should include at least the name Point Reyes Station 
on your Web site because people searching for lodging in the area are likely to 
include the town's name in their search. 




A great way to determine how best to make your own site search engine friendly is 
to search for keywords that you want to use to lead people to your site and then 
study the Web sites that match. Look closely at not only the words on the page but 
also which words are in headlines and in bold, and at how the page title at the top of 
the browser is worded. Often the best way to move yourself up the ranks in search 
results is to emulate the strategies of other sites that are already doing well. 



Achieving the best placement, especially for popular keywords, is a full-time job, but 
here are a few tips that most SEO specialists agree are likely to help you score better 
in search engine searches. 



Fill your site with fresh, original content related to your business or 
industry. If you read the Tips section on most search engine sites, you find 
that the best way to score high is to create a Web site that's relevant to the 
keywords you want to match. The best way to do that is to include stories, 
tips, FAQs, and other content that's valuable to your visitors and related to 
your business or service, and to keep it updated by adding fresh content 
regularly. 

To continue with the B&B example, you can develop an Activities section 
like the one the Black Heron Inn uses. Then write a story about the extraor- 
dinary wildlife in your area, create a Top Ten list of the best reasons to visit 
the ocean in the spring, or design a guide to nearby hiking and biking trails 
with tips on how to plan the ultimate outing. Adding these kinds of features 
to your Web site not only serves your visitors when they get to your site but 
also can make a huge difference in the likelihood that search engines will 
deem your site worthy of sending those visitors to you in the first place. 
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Invite other sites to link to you. Google rewards people who attract the 
most links to their sites, especially if those sites already have good rank- 
ings. It makes sense: If lots of other Web sites consider your site good 
enough to send their visitors to you, you probably have something of value 
offer. Thus, one of the best ways to improve your ranking in search 
gines is to have a good collection of links from other Web sites. You can 
get other sites to link to you by offering to link to them and asking them to 
return the favor; by offering stories, tips, or other content so compelling 
that they want to send visitors to you; or by paying the other sites to add 
links to you. (I tell you more about that strategy in the "Buying Traffic" sec- 
tion, later in this chapter.) 

Develop a list of keywords and a good description for your site. The trick 
to writing a good Web site description is making it concise (every word 
counts), packing it with your most important keywords, and phrasing it so 
that it reads like a sentence (not just a list of words). Include this descrip- 
tion toward the top of your home page and in the Meta description tag, 
which is a special tag that can be used to add information for search 
engines that doesn't appear in the body of a Web page. Similarly, you can 
include a list of keywords in the Meta keywords tag. (You can find instruc- 
tions for adding content to these two Meta tags in the section "Adding Meta 
Tags for Search Engines," in Chapter 5.) 

Include your most important keywords in the title of your Web page. The 

title doesn't appear in the body of a Web page; the text appears at the top of 
the browser window. You can add or edit the title of a page in Dreamweaver 
by changing the text in the Title field at the top of the screen. 

Include keywords in the headlines on your Web page. Most search 
engines place higher priority on keywords that appear in the headlines on a 
page than in the body of the page, but only if you use HTML heading tags to 
style those headlines. Heading tags, which include Hi (the biggest) through 
H6 (the smallest), identify text as headlines in a way that search engines 
easily recognize. All templates that you can download from this book's com- 
panion Web site use heading tags to format headlines. (See the introduction 
for more details about the Web site.) 

Don't expect instant (or permanent) results. Even if you do everything 
right in the search engine search game, you might still have to wait for your 
Web site or new content to be included in searches. Some search engines 
update their databases almost instantly; others can take weeks or months 
to reflect changes to Web pages on the Internet. This situation is a common 
challenge with Google, which seems to update the most popular sites 
almost instantaneously while lagging weeks or months behind in updating 
less-visited sites. 




Even if you get that great search result you're hoping for, don't count on staying at 
the top of the list. Search engine rules change frequently, and new competitors can 
emerge at any time, pushing your Web site lower down the list if you're not actively 
working on keeping it at the top. 



Because search engine optimization is so complex and success can be fleeting, many 
people prefer to use the somewhat more certain approach — search engine advertis- 
ing, described in the following section. 
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A great place to learn more about how search engines work and how to achieve the 
best ranking is www . searchenginewatch . com. 

u$fu[$affic (\!es, \lou Really Can!) 

In addition to the "natural" results that search engines deliver when someone does a 
keyword search, search engine advertising appears at the top and right sides of 
most search-result pages. Buying keywords on search engines help to ensure that 
your site is listed when someone searches for words that are relevant to your site, 
although the process is far more complex than most people realize. 

Not all keywords sell for the same price. Using a complex bidding process, most 
search engines charge significantly more for the most popular keywords. Adding to 
the complexity, the results of those keywords for your site can vary dramatically 
based on a dizzying array of factors. For example, the expensive keyword Hawaii 
may bring the most amount of traffic to your site, but the lower-priced keyword luau 
may result in more reservations to your hotel. Because it's possible to measure not 
only the traffic from a keyword search but also the actions of the person who clicks 
on that keyword, you can quickly measure and compare the effectiveness of search 
engine advertising. 

Again, this process can be highly complex. Just developing a list of keywords worth 
purchasing seems easier than it really is at first. Sure, if you have a B&B in Point 
Reyes, you can likely make a list of the obvious words quickly. But the real art of 
developing a list of keywords for search engine advertising requires more than just 
brainstorming 20 or 30 words related to your business. The best SEO companies 
come up with hundreds or thousands of keywords and then track the results to get 
the most new customers per click and dollar spent. 



This strategy pays off because search engines charge for a keyword ad only when 
someone clicks on the ad. Thus, running a campaign with 10,000 words might not 
cost much more than running a campaign with 100 words, and might prove much 
more effective over time. 



Add to that strategy the importance of landing pages and sales messages. The most 
sophisticated ad campaigns involve creating special Web pages to go with each key- 
word. For example, you can create a very different Web page on your Hawaiian hotel 
site for people who click on the search term scuba diving than for those who click 
on the search term health spa. If you have an adequate budget, you might do well to 
hire professional search engine advertising services to manage and develop a cam- 
paign like this one for you. 

Google AdSense is the largest online advertising program for keywords. Just click on 
the Advertise button at www. google . com to find detailed instructions and a 
number of tips and tools to help you find the best keywords for your site. 
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Promoting \lour Site With 

Sites 

meeting and building contacts on the Web, is an increas- 
ingly popular way to increase your personal and professional contacts, make new 
friends, develop professional relationships, and even find a new job. You can also 
use social networking sites to promote your personal or business Web site. 
Netiquette (Internet etiquette) calls for a subtle approach to promoting your site in 
these kinds of environments, but simply including your Web address in your online 
profile can help drive new people to your site. 

Here are some of the most popular social networking sites and what you can expect 
to find there: 

MySpace (www.MySpace . com): One of the all-time most popular social net- 
working sites, MySpace makes it easy to create a profile site, add music, 
write a blog, and post as many photos as you want to share with the world. 
Although the site has dominated the social networking landscape on the 
Internet, at the time of this writing, it was rapidly losing members. Still, its 
huge online audience is a popular place for musicians, performers, and 
many others to promote themselves and their Web sites. 

Linkedln (www. linkedin. com): Increasingly, this is the site for profession- 
als and online networking. If you're online to network with other profession- 
als, especially if you're job hunting or trying to attract new business clients, 
this is a powerful place to promote yourself and your Web site. 

eCademy (www.eCademy.com): Similar to Linkedln, eCademy is a site 
where professionals network, seek new clients, hunt for jobs, and recruit 
employees. What makes eCademy different is that it's much more interna- 
tional, with an especially strong audience in Europe. 

Facebook (www. FaceBook . com): Originally designed for students, faculty, 
and university staff, Facebook is no longer restricted to those with a .edu 
e-mail address, and it's growing fast now that anyone who wants to partici- 
pate can join the site's community. The site was originally considered a 
vanity site and a place for students to connect and trade stories, but its pro- 
fessional power is growing with its ever-expanding audience. 

Friendster (www.Friendster.com): One of the first online networking 
sites, Friendster was especially popular with the dot-com crowd in San 
Francisco and continues to have a relatively small, but very loyal, following. 

Ryze (www. Ryze . com): This site hosts many real-world networking events 
and is especially popular in a few urban areas, including Los Angeles and 
San Francisco. 

Ning (www. Ning . com): You create your own social networking site at Ning 
and invite your friends and colleagues to create profiles there. 
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Getting \lour Site Ranked on 
Social Bookmarking Sites 





cral Dookmarking sites rank the popularity of Web pages by the number of votes 
they get. The result is that these sites are excellent resources for people who want to 
keep up with what's popular online. Most offer special software that makes it easy to 
vote on a site, and they feature catchy and unusual names, like Digg and del.icio.us, 
that encourage users to rank sites they visit frequently. 

Getting your site listed on social bookmarking sites is a highly effective way to 
increase traffic. Dozens of these sites and services exist, with more sure to come; 
among the most popular are Digg.com, Stumbleupon.com, and readdit.com. 
Although it's designed to store and share bookmarks, del.icio.us (that's really the 
address — you type it just like that) is another site where users can search for con- 
tent that other people have tagged as being useful and relevant. 

Although you can submit your own pages on any of these sites, it's generally 
frowned on, and if you do it too frequently, you can be banned from these sites. 
Besides, your one little vote won't make much difference anyway. A better method is 
to add a button to your site from each of these services that makes it easy for your 
visitors to vote for you. If you're a blogger, you can add a button each time you post. 
You can get the buttons (also called chicklets) for free and add them to your pages 
by simply inserting a little code you generate on the social networking site. (You find 
instructions for adding code to your pages in Chapter 13.) 



Enticing Visitors to Return 
for Regular Updates 



One of the best ways to improve traffic to your site is through repeat visitors, and 
regular updates to your site can make all the difference. If you want your visitors to 
know when to look for updates, consider making regular changes to your Web site. 
Add a post to your blog every Thursday morning, for example, or post your newest 
photos to the site on Saturday morning. Regular updates help get people in the habit 
of visiting your site. 



Gathering Ideas from Other Web Sites 

One of the best ways to create good habits in Web design is to visit other people's 
Web sites and study what works and what doesn't on their pages. While you're 
there, check out the title of the page, any descriptive text, or keywords that are used 
throughout the site. 

As you look at related Web sites, ask yourself what you like about the site and why 
you like it. Also, determine whether you can easily find the information you're most 
interested in and how easily you can navigate around the site. 



Chapter 15: Ten Ways to Promote Your Site 




Sometimes the best way to discover the problems in your own Web site is to look for 
problems on someone else's site and then return to yours with a fresh perspective. 
Similarly, you can gain many great ideas, from design tips to marketing ideas, by 
studying what people do on other Web sites. 



Marketing a Web Site to the Media 

Attracting traditional media attention to your Web site is not unlike attracting it to 
any other business. The trick is to tell a good story and get the attention of someone 
who can write about it in a publication that's read by your target audience. 

If you're looking for press coverage, make sure to include a Press section on your 
Web site with contact information, story ideas, and any other press coverage you 
already received. 

Don't wait for journalists to come to you! You should never pester a reporter with a 
barrage of e-mail, press releases, or phone calls, but a well-timed or well-pitched 
message can get the attention of a reporter and the desired result — your Web 
address in the press. One good way to find journalists who might be interested in 
your site is to visit related sites and study their Press sections to find out who has 
been writing about them. Note not only the publication but also the writer, and send 
a note directly to that person with a message that starts like this: 

Dear fabulous journalist <insert that person's name, of course>: 

I enjoyed reading the article you wrote on the XYZ company and thought that 
you might be interested in what we're doing. 

Keep your message brief, and try to include a news hook and story idea that go 
beyond just promoting your business. For example, rather than tell a reporter that 
you have the best B&B site in northern California, pitch a story idea. For example, 
send a note to a travel writer offering to help with a story on the best hikes in the 
area. With any luck, the story on great hikes will include a quote from you and a 
mention of your B&B's Web site (especially if the reporter can send readers to your 
list of hiking tips). 



Unleashing the Pouter of Virat Marketing 

Viral marketing is another of the marketing industry's new buzzwords in the digital 
age. The idea is that a message (a video, an article, or a photo, for example) is so 
exciting, fun, and compelling that people want to share it with each other and pass it 
on to their friends, who then pass it on to their friends, until it spreads like a virus. 
Such messages are often spread via e-mail, blogs, or chat, which can make the ever- 
expanding impact happen at an almost instantaneous pace. 

Tap into the power of viral marketing, and you can become an overnight sensation. 
Humor seems to be the most effective strategy. Among the mainstays of the viral 
phenomena are those silly photos of cats with clever sayings, known as the LOL 
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cats, which have spawned several Web sites, like ICanHasCheeseburger.com. Funny 
video clips, the kind you would expect to see featured on a show like America s 
Funniest Home Videos, are also highly viral because they're shared around the Web. 



DropBooks 



you use viral marketing to attract traffic to your Web site? Include a 
h funny photos, industry jokes, or a Top 10 list, and you might just get 
visitors to tell their friends about your site. 



Blagging, Blagging, Blagging 




Adding a blog to your Web site is not only an easy way to add fresh content to your 
Web site, but when you become a blogger, you also join the ranks of a prolific group 
of writers who regularly refer their readers to each other's Web sites. 

Don't launch a blog just to "do it." Make sure that your blog features interesting, rele- 
vant information for your audience and that you update it regularly. And, if you want 
your blog to serve as an effective marketing tool, take the time to participate in 
other people's blogs. Adding relevant tips and thoughtful comments to other 
people's blogs is an excellent way to get their visitors to come back to your Web site. 



Instructions for creating a blog and integrating it into your Web site are in Chapter 10. 



Telling Everyone \lau KnavO 

It might seem obvious, but many people are either too shy or too busy to reach out 
to their friends, family, and personal contacts when they launch a Web site. Don't 
overlook your most obvious supporters. 

Launching a new Web site, or redesigning an existing site, is an excellent excuse to 
e-mail personal and professional contacts. To make the announcement even more 
fun, consider sending an e-card with a colorful character, animation, or music to 
dramatize your announcement. 

Hallmark.com is one of my favorite e-card sites because it has lots of free cards with 
clever sayings, professional designs, and interactive animations. Most of its free 
e-cards even include sound. BlueMountain.com is another useful e-card site, but you 
have to pay for the pleasure of sending its professional greetings. 

When choosing an e-card to announce your Web site, look for blank cards or the 
Friendship and Any Occasion sections, where you can find messages that are easily 
personalized for nearly any kind of Web site. 

Make sure to include your URL on all your marketing and other materials, too. Your 
Web address should be prominently displayed on your business cards, brochures, 
stationery, and anywhere else you promote your business. 
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